Add standard components

Add standard components to save time coding emails.

You can add one or more standard components to the code editor. Type x- and you'll see a list of available standard components. Choose the one that meets your needs.

In the code editor, an x-base tag is typed. An x-section tag is nested within that. Then an x-heading-2 tag is nested within that. Within the heading tag, the words "Welcome to Parcel!" are typed. An x-paragraph tag is typed below the header. Inside the tag, this sentence is typed, "Check out our docs." Below that, an x-cta tag is added with the words "Learn more." The user clicks the visual editor in the top left dropdown. In the visual editor, the user clicks the learn more button then clicks the pencil icon that appears above the component. A properties menu appears. The user enters parcel.io/docs in the Link field. Then the user changes the background color of the button from black to blue. The user switches back to the code editor and you see the properties added to the x-cta tag.
Screen recording that shows creating an email from scratch using standard components.

Style a standard component

To style a standard component, use the properties menu of the visual editor or add attributes directly to in the code editor.

In the visual editor, select the component then click the pencil icon. You will see a modal of available properties. Click More properties and a right-hand panel will appear where you can continue to adjust settings as you see fit. Changes are saved automatically.

A screenshot of the Parcel window. On the right of the canvas is a panel of attributes for a button component. Above the panel is a paint brush icon you can select to close/open the panel.
The properties menu of a button component.