Visual Editor

Where you edit content with visual blocks

Welcome to our new editor! You know Parcel as an easy way to code emails. Now, we're building a visually friendly way to create emails! Send us feedback anytime! We'd love to hear from you.

Overview

Right now, you can create an email in our Code Editor and modify text, images, and links in the Visual Editor. You'll see a dropdown in the top left of the editor where you can switch between Code and Visual editing experiences.

Silent video of the full Parcel window and the code editor open. The cursor moves to the top left dropdown that shows Code, clicks it, and selects Visual. The new visual editor appears. The cursor moves to the header tag and hovers over the image at the end of the line. The cursor select img then clicks the pencil icon and a modal appears. The image source is edited. The cursor clicks x and closes the modal. The curose moves to a link in a paragraph below. The linked word is double clicked then the link source is edited. Finally, the cursor moves down to a bulleted list and edits the text of several list items."
Screen recording that shows modifying images, links, and lists in the Visual Editor

Currently, you can edit, but not create:

  • text within the following HTML tags: p, h1, h2, h3, h4, h5, h6, a, li
  • images including the source and alt text for accessibility
  • links for both text and images

Make any text editable

If you have text you want to be editable but you aren't using a supported tag, you can wrap it in a x-edit-text tag. This will allow you to edit the text in the Visual Editor.

Example:

<div style="font-size: 12px;">
<x-edit-text> This is a div that you can edit. </x-edit-text>
</div>

Upcoming Releases

The Visual Editor is a work in progress. In the coming months, we will release the ability to:

  1. Move, delete, and duplicate components
  2. Create messages from scratch
  3. Save brand styles
  4. Save custom components