Parcel Playground

Parcel Playground is a tool for building and testing emails.

Note

This feature is for email frameworks and other tools that need to display emails from inside their product.

When you're documenting your code or building your product, you might need to give your users a way to view and experiment with an email.

Parcel makes this super easy with the "Edit in Parcel" button!

Demo

The code

To create a "Edit in Parcel" button, use the following code:

<button style="all: unset; cursor: pointer" id="edit-in-parcel">
  <img src="https://parcel.io/button.svg" alt="Edit in Parcel" />
</button>
<script src="https://parcel.io/assets/embed.js"></script>

<script>
  document.querySelector('#edit-in-parcel').addEventListener('click', function () {
    parcel.openInPlayground({
    name: 'Name of your Email',
    html: '<html> your html code </html>',
  }, {
    returnUrl: 'https://www.yourwebsite.com',
    returnText: 'What the return button will say'
  });
</script>

Email Details

  • name - The name of the email.
  • html - The HTML content of the email.
  • amp - The AMP content of the email.
  • text - The text content of the email.

Options

  • theme - The theme of the editor. Options are parcel-light and parcel-dark. Default is parcel-dark.
  • returnUrl - The URL to return to.
  • returnText - The text of the return button.

All the options are optional. If returnUrl and returnText are not included, no return button will show.

Embed

To embed the Parcel Playground in your product, use the following code:

<div id="parcel-playground" style="height: 400px; width: 100%;"></div>

<script src="https://parcel.io/assets/embed.js"></script>
<script>
  parcel.embed('#parcel-playground', {
    name: 'Name of your Email',
    html: '<html> your html code </html>',
  });
</script>

Email Details

  • name - The name of the email.
  • html - The HTML content of the email.
  • amp - The AMP content of the email.
  • text - The text content of the email.

Options

  • theme - The theme of the editor. Options are parcel-light and parcel-dark. Default is parcel-dark.
Previous ArticleNext Article