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

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

Silent video of the full Parcel window and the code editor open. The cursor moves to an header tag and enter Welcome to Parcel. The curseor clicks a dropdown in the top left that says Code then clicks Visual from the list of options. The new visual editor appears. The cursor moves to the header tag, clicks after the word Parcel and enters an exclamation point. The cursor hovers over an image below the header and clicks a pencil icon which displays the properties menu. The cursor inputs a width of five percent in the CSS style field and the image shrinks down. The cursor clicks outside of the modal then into a paragraph and adds the word platform after email coding. The cursor double clicks the word Parcel in the paragraph and a bubble menu appears. The cursor clicks the link icon then adds parcel.io as a link to the text. The word becomes hyperlinked in the editor."
Screen recording that shows modifying an image and text in the Visual Editor. The properties menu is coming soon!

Currently, you can edit and style, 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

This is also true for standard and custom components. That is, if you include a <div> tag with content inside or outside of a component in your message, that content is not yet editable in the visual editing experience. You'll either have to edit in code or use a special tag, explained below.

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>

Use components

Components are a way to organize your code into reusable blocks. We offer two types of components - standard components and custom components:

  • Standard components are our in-house solution to get you up and running as quickly as possible. Need a call-to-action button? Type <x-cta> in the code editor and voila! Need different styles? Check out our supported properties. Keep in mind, a change to a standard component in one email will not change the same component in any other email.
  • Use Custom components to create reusable blocks of code from scratch. You can add your own Javascript, set your own variables, and reference this code in any email. Unlike snippets, a change to the component file will cascade down through all emails the file is referenced in. If you're a veteran user of Parcel (before April 12, 2024), you know we've offered a version of custom components for a while. Read on to learn about the latest enhancements and why you should upgrade!

You'll add components through the code editor, then you can edit their content in either the code editor or visual editor.

Upcoming Releases

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

  1. Style content using a properties menu
  2. Move, delete, and duplicate components
  3. Create messages from scratch
  4. Save brand styles
  5. Save groupings of custom components
Previous ArticleNext Article