Design & Code Editor

Both editors provide access to similar features, and you can achieve the same results with either editor. Which editor you choose will mostly be determined by the way you like to work. A brief description of the editors and their shared functionalities is provided below. The user interfaces are similar but have some differences. How to work with the editors is detailed in the editor-specific sections below.

The Code Editor is perfect for users who are importing, creating, or editing custom HTML. It offers a robust environment to upload images, backed by a feature-packed editor - complete with split-screen preview, error flagging, scroll-syncing, syntax highlighting, and more. While other email editors may be notorious for adding excess code to your project, rest assured that our editor never modifies your carefully crafted HTML.

The Design Editor, complete with HTML access to each content module, offers powerful what you see is what you get (WYSIWYG) editing. It features a diverse library of content blocks, allowing you to build beautiful emails quickly and intuitively. Once placed into your email, each module offers access to edit the HTML and a robust panel of settings - perfect for customizing content precisely to your needs.

Both editors support dynamic data using Handlebars syntax. Dynamic data includes any information you use to personalize a design, such as a customer's name or order confirmation number. You can use test data in the editor's preview to ensure your dynamic values behave the way you expect before you ever send a message.

In addition to substituting values, you can use Handlebars in your designs to format dates, iterate over lists, and conditionally render values. See our Handlebars documentation to see all that you can do with dynamic data and Twilio SendGrid templates.

Substitution Tags allow you to use any reserved or custom field data you've added to Marketing Campaigns to dynamically generate unique content for each recipient of your email. A common example is to add a recipient's first name to the body (or even the subject line) of your email.

The data that populates your Substitution Tags will come from the information you have stored about each contact. You can manage this information on the Marketing Campaigns Contacts page.

In addition to the following reserved fields that are available on all contacts by default, you can add your own Custom Fields with Marketing Campaigns. When building Marketing Campaigns designs, your Custom Fields will be available in the Tags tab of the editors. For information about managing these fields, see our Custom Fields documentation.

The following Tags are provided by Twilio SendGrid by default and are available on each of your contacts.

* For your convenience, these substitution tags are included by default in the Unsubscribe Module found on the Tags tab of the Design Editor.

See how to work with Substitution Tags

• Using the Code Editor
• Using the Design Editor

The Design and Code Editors both provide a test data preview feature. This means you can add the reserved and custom fields stored on a contact as well as any other variables you wish to pass into your template, such as order confirmation data. Test data provides a way to be sure that your final design will populate and render the substitutions properly. If you wanted to collaborate on a design for example, having test data stored directly in the design means each teammate can reference the data structure used to populate substitution tags without having to dig into a code base.

See how to work with Test Data

• Using the Code Editor
• Using the Design Editor

Assigning categories to a Single Send allows you to track emails based on your own categorization system. By assigning your Single Send to a category, you can track statistics across multiple similar Single Sends and Automations. For example, you might have categories like "Weekly Digest" or "Product Announcements."

See how to add categories

• Using the Code Editor
• Using the Design Editor

Email testing offers robust, pre-send testing of your emails, including in-app spam testing, inbox rendering previews, and link validation right within your Marketing Campaigns workflow. It allows you to preview how an email is likely to perform across a wide range of inbox providers, devices, and spam filters before sending. For more information, see our dedicated email testing documentation.

Both editors provide undo and redo functionality using the undo and redo buttons at the top of the editor UI or with keyboard shortcuts.

Undo/redo keyboard shortcuts

• Undo: Command or Control + Z
• Redo: Command or Control + Shift + Z

Expand image

Twilio SendGrid's marketer-friendly code editor features a powerful split-screen editing experience - perfect for building Single Send or Automation emails with your own custom HTML. It offers a number of helpful features, often found in full-featured code editors.

See how your email looks in real-time as you write and edit code. No more tabbing between windows, refreshing, or re-rendering. Marketing Campaigns' split-screen editing experience displays your code on the left and a pixel-perfect preview on the right.

If the code editor finds something that seems odd or inconsistent with best practices, instead of interrupting your workflow, it places a small red "x" in the margin of the line so you can come back and check when it's convenient for you.

Easily pinpoint the HTML element you wish to edit. Click anywhere on the right-side preview of your email, and the code on the left automatically jumps to the corresponding line. Click somewhere on the left, and the preview on the right will jump along with you.

As you edit, parts of your code highlight in various colors according to the type of syntax. This added dimension provides clarity and efficiency as you search for, locate, and edit code elements.

To use the code editor for Single Sends:

1. From the left-hand navigation, select Marketing, and then click Single Sends
2. Click Create a Single Send. To create a Single Send email using an existing (drafted or sent) email, find the Single Send you'd like to use and click the action menu next to the email.
3. Then, select Edit or Duplicate.
4. Select Code Editor, and then click Continue.

To use the code editor for Automations:

1. From the left-hand navigation, select Marketing, and then click Automations .
2. Click Create an Automation.
3. Under Custom Automation click Select.

1. Give the automation a name, entry criteria, exit criteria, and select an Unsubscribe Group.
2. Select the send time and then click the edit button next to Email 1.
3. Select Code Editor, and then click Continue.

You can select a blank template, a custom template that you have already created, or one of Twilio SendGrid's pre-built templates. For more information, see "Working With Marketing Campaigns Email Designs".

If you have already built the HTML that you want to use in another application, copy and paste that code directly into the content area of the Code Editor. You can also write the HTML for your email or template directly in the Code Editor.

The split-screen view of the Code Editor allows you to see a real-time preview of your email. You can toggle between a preview of how your email or template appears on a recipient's desktop and mobile phone by clicking either the desktop or mobile phone icons above the content area. You can also view a plain text version of your email or template by clicking the T icon. When in this preview mode, you can edit the plain text content of your email or template by clicking the Edit Plain Text button.

1. Select the images icon above the HTML code. A window opens where you can upload images to your library.
2. Select the image you want to add from your image library.
3. Select the image details tab and copy the URL in the Image Source URL tab by clicking Copy URL.
4. Paste this URL in an image source tag in your email or template's HTML.

<img src="your image URL here" />

To add a substitution tag to your email:

1. Click the Settings tab on the left side of the editor.
2. Click the Tags tab at the top of the Settings window.
3. Locate the tag you want to add to your email and click it to automatically copy it to your clipboard.
4. Paste the tag into the email.

When copying and pasting a tag from the Tags tab, a default will be added automatically. Default values are supported by the insert keyword only. For this reason, tags with default values will be saved with a different syntax automatically. For more information about working with default values and Handlebars, see Adding Dynamic Content with Handlebars in Marketing Campaigns.

1. To access the test data preview from the editor, click preview and then Show Test Data.

Expand image

You can place the data for any tags in your design into the Test Data window. Note that the data must be in JavaScript Object Notation (JSON) format which is shown below. JSON is a way of structuring data in a collection of key/value pairs. For example, if you use the first_name substitution tag, first_name is the key and the customer's name is the value. The following sample code can be copied into Test Data to show a number of reserved fields. You can add to the list following the same format to capture any of your custom fields that are used as tags in your design.

1
{
2
  "first_name": "Tira",
3
  "last_name": "Misu",
4
  "email": "recipient@example.com",
5
  "alternate_emails": "recipient+@example.com",
6
  "address_line_1": "1234 N. Real Ave.",
7
  "address_line_2": "Suite 200",
8
  "city": "Denver",
9
  "state_province_region": "CO",
10
  "postal_code": 80202,
11
  "country": "United States"
12
}

4. Once you have test data in place, the preview on the right pane will render your test data within your design as it would appear for recipients.

Expand image

To add categories to a Single Send

1. Click the Settings panel located on the left-hand side of the window to expand it.
2. Navigate to the Settings tab, and click Single Send Settings to expand the menu.
3. Locate the Categories field under Single Send Settings.
4. Select the Add Categories field. Type in the tag that you'd like to add, and press enter.

SendGrid's flexible design editor allows you to build your templates and emails using intuitive, drag & drop tools. The what you see is what you get (WYSIWYG) editing experience features a library of modules for easily adding content to your email.

To use the design editor for Single Sends:

1. From the left-hand navigation, select Marketing, and then click Single Sends
2. Click Create a Single Send. To create a Single Send email using an existing (drafted or sent) email, find the Single Send you'd like to use and click the action menu next to the email.
3. Then, select Edit or Duplicate.
4. Select Design Editor, and then click Continue.

To use the design editor for Automations:

1. From the left-hand navigation, select Marketing, and then click Automations .
2. Click Create an Automation.
3. Determine whether you'd like to send a pre-made "Welcome" series or a custom Automation and then click Select.
4. Give the automation a name, entry criteria, exit criteria, and select an unsubscribe group.
5. Select the send time and then click the edit button next to Email 1.
6. Select Design Editor, and then click Continue. The Design Editor opens.
7. Select the template that you want to use for your email. You can select a Blank Template, a custom template that you have already created, or one of Twilio SendGrid's pre-built templates. For more information, see "Working With Marketing Campaigns Email Designs"
8. Select Design Editor and then click Continue. The Design Editor opens.

Drag and drop editing helps you swiftly construct your email, using pre-built content modules. You can edit individual modules in the left sidebar and reorder modules in your email body by clicking and dragging your mouse.

To add a drag & drop module:

1. Navigate to the Build tab and then click Add Modules.

Expand image

2. Find the module tile you want to add to your email. Then, drag and drop it into your content area.
3. Edit the module settings and add your custom content to build your email.

In addition to editing the styles for individual modules within your email/template, you may also make changes to the global styling of your entire email/template. This includes attributes such as the background color, text color, or font family.

The email body is the entire area that your email or template fills inside your recipient's browser or email inbox.

Under the Global Styles dropdown menu in the left hand sidebar, click Email Body or Content Container to view and edit the following styles:

To edit Module HTML:

1. Select the module in the design editor and click the < > icon. A window opens where you can edit the module HTML.
2. When you are finished editing the HTML, click Update.

The code module is a unique drag and drop module that allows you to insert any custom HTML in your email as a single module which can be relocated and edited.

To upload an image:

1. Navigate to the Build tab and then click Add Modules.
2. Select the Images module and drag and drop it into your content area. This opens a window where you can upload images to your image library.
3. Drag and drop the image you want to use from your files or select Choose images to upload.

To insert an image:

1. Navigate to the Build tab and then click Add Modules.
2. Drag and drop the Images module into your content area. A window opens where you can select images from the image library.
3. Select the image you want to add to your email. The Image Details tab opens.
4. Insert your image in the email by clicking Save Image.

To add a substitution tag to your email:

1. Navigate to the Tags tab.
2. Locate the tag you want to add to your email and click the copy icon.
3. Paste the tag into the module.

When copying and pasting a tag from the Tags tab, a default will be added automatically. Default values are supported by the insert keyword only. For this reason, tags with default values will be saved with a different syntax automatically. For more information about working with default values and Handlebars, see Adding Dynamic Content with Handlebars in Marketing Campaigns.

1. To access the test data preview, open a design in the Design Editor and select the Preview tab.
2. With the Preview tab active, you will see a Show Test Data button on the left. Click this button to open the test data window.

Expand image

3. You will now have a side-by-side view of a code window and your design.

You can place the data for a contact into the code window. Note that the data must be in JavaScript Object Notation (JSON) format. JSON is a way of structuring data in a collection of key/value pairs. For example, if you use the first_name substitution tag, first_name is the key and the customer's name is the value. These keys can also be thought of as variables. Like a variable in algebra, these variables represent a value you don't yet know. The following sample customer is provided in JSON format for you to experiment with.

1
{
2
  "first_name": "Tira",
3
  "last_name": "Misu",
4
  "email": "recipient@example.com",
5
  "alternate_emails": "recipient+@example.com",
6
  "address_line_1": "1234 N. Real Ave.",
7
  "address_line_2": "Suite 200",
8
  "city": "Denver",
9
  "state_province_region": "CO",
10
  "postal_code": 80202,
11
  "country": "United States",
12
  "phone_number": "+15555555555",
13
  "Sender_Name": "Orders",
14
  "Sender_Email": "orders@example2.com",
15
  "Sender_Address": "1234 N. Exist St.",
16
  "Sender_City": "Portland",
17
  "Sender_State": "OR",
18
  "Sender_Zip": 97227,
19
  "Sender_Country": "United States"
20
}

4. Once you have test data in place, you should see any substitution tags for which data is present rendered properly.

Expand image

Expand image

To preview your email or template, click the Preview button in the upper-left corner.

You can toggle between a mobile and desktop preview mode by clicking either the desktop or mobile phone icons above the content area.

To view a plain-text version of your email or template, click the T icon. When in this preview mode, you can edit the plain text content of your email or template by clicking the Edit Plain Text button.

When previewing an email, you also see a preview of the From name, the Subject, and the preheader text that you have selected.

The HTML <head> element is where you can define any metadata you would like to include with your email or template. For example, you can use the <head> element to define any custom fonts or CSS styles you would like to use.

To edit the HTML head of your email or template:

1. Navigate to the Build tab in the left-hand toolbar and scroll to the Advanced menu.
2. Expand the option titled Edit HTML Head.
3. Click Edit to begin editing your HTML head. A window appears where you can insert your custom HTML.
4. Once you've finished making your changes, click the Update button.

Most commonly, users add custom fonts by using the tag to reference a web font hosted somewhere on the internet. For example, Google Fonts.

While some inbox providers do not support web fonts, the following popular clients do provide web font support*:

• Apple Mail
• Outlook.com app
• Outlook 2000
• Default Android Mail app (not the Android Gmail app)
• iOS Mail

* This list may change and we cannot guarantee 100% support from any of these clients.

To add a custom font using the HTML head:

1. Open the HTML Head by navigating to the Build tab in the design editor.
2. Scroll down to the Advanced drop-down menu and select Edit HTML Head.
3. Click Edit to begin making your changes.
4. Insert a <link> tag containing an href attribute pointing to your web font.

<link href="https://fonts.google.com/specimen/Oswald" rel="stylesheet" />

Next, add a <style> to specify that you want to use this new font family:

1
<style>
2
  body {
3
    font-family: 'Oswald', sans-serif;
4
  }
5
</style>

If you are writing your own custom HTML that you plan on importing into the design editor, refer to the drag and drop code examples to ensure that any modules you create are compatible with our drag and drop functionality. If you do not specify a data type that matches one of our drag and drop modules, your code is imported as a text module.

To import custom HTML:

1. Navigate to the Build tab in the left-hand navigation.
2. Scroll down and select the Advanced drop-down menu.
3. Expand the option titled Import Drag & Drop HTML.
4. Click Import. A window opens where you can paste in your own HTML.

Expand image

5. Paste or enter the HTML you want to use and then click Import.

Twilio SendGrid parses your custom HTML, looking for any drag & drop compatible modules.

• First, we look for any HTML elements that contain the attribute role="modules-container".
• Next, we look for all HTML elements with the attribute role="module" that are descendants of the "modules-container" element.

The role="modules-container" attribute is required so that we know where your drag and drop modules are located. All of the Twilio SendGrid pre-built templates include the role="modules-container" by default. You are only required to include this attribute when creating an email or template from scratch that you want to be compatible with the design editor.

Following are examples of how you should structure and organize your custom HTML, where [module content] represents the content of your modules.

To export template HTML from the design editor:

1. Navigate to the Build tab in the left-hand navigation.
2. Scroll down and select the Advanced drop-down menu.
3. Expand the option titled Import/Export. This starts the raw HTML download of the template, excluding images.

SendGrid hosts the images included in the pre-built templates and any images you have uploaded to the image library, so when you export a template's HTML from the design editor, the embedded URLs in each <img> tag remains valid.

To open exported HTML in the code editor using Single Sends:

1. From the left-hand navigation, select Marketing and then click Single Sends.
2. Click New Campaign and then select Blank Template.
3. Select Code Editor.
4. Paste the raw SendGrid template HTML into the code editor.

To open exported HTML in the code editor using Automations:

1. From the left-hand navigation, select Marketing and then click Automations.
2. Click Create an Automation and then navigate to Custom Automation and click Select.
3. Navigate to the first email in the Automation series and click Edit Email Content.
4. Locate the blank template and click Select.
5. Select Code Editor.
6. Paste the raw SendGrid template HTML into the code editor.

To add a category:

1. Navigate to the Settings tab and click Single Send Settings to expand the menu.
2. Find the Categories field.
3. Enter the name of a new category or select a previously used category from the drop-down menu.

• Sending an Email
• A/B Testing
• Campaign Statistics
• Marketing Campaigns Email Designs