Litmus Builder guide

What is Litmus Builder?

Litmus Builder is a code editor specifically built for email design and development. Litmus Builder is built into the New Litmus Platform and all emails in Litmus will have a Builder view for design, code editing and testing. In Legacy Litmus, Builder could be used as a standalone tool.

Builder has a number of unique features to help you streamline the Email creation process: 

  • Get previews of your email in popular email clients while you're building.
  • Utilize reusable code snippets and partials
  • Autocomplete for CSS and images
  • Pre-tested templates
  • Sync with email service providers (Available on Plus and Enterprise plans)

Table of Contents

Note:  This guide is specific to using Builder in the New Litmus platform. To get started in Legacy Litmus Builder see this section. 

Create an Email

All emails in Litmus have a Builder view. Use the New Email button in any folder to get started. Give your email a name, and click "Pick a template."

new emailThen either choose a template or start with a blank email:

choose template

Builder view

Builder view contains an email list side panel, an editor pane (code or visual), and a browser preview pane on the right side. The left side panel shows all emails in the current folder. Tip: You can slide the left panel closed for more space. 

builder view

Save your email

To save an email in Builder:

  • Use the shortcut command Cmd+S (Mac) or Ctrl+S (Windows) to automatically save the email.


  • Click on Save in the toolbar

Note: Builder automatically saves your changes locally in your browser as you type but does not save it to your account in Litmus until you manually save.  

Rename your email

Use the breadcrumb area in the upper left to Rename your email: 

rename email

Upload Images

Images can be added to your email by clicking Insert > Image in the toolbar and then either clicking the upload icon or dragging in an image file. You can also show/hide the side panel by using the keyboard shortcut Cmd+B.

upload images

There are three ways you can upload images to Builder:

  1. Click on the Upload Image icon (cloud) which is located directly to the right of an email’s name/title. Clicking on this icon will open up an Upload Image modal where you can select to upload image(s) from your local desktop.
  2. Simply select one or more of your local files and drag them anywhere into the Builder view and drop the files. Builder will automatically recognize that you are uploading images and will upload them to the existing email.
  3. Right-click on an empty area in the Builder side panel and click Upload Image from the context menu. This will open up an Upload Image modal where you can select to upload images from your local desktop.

*Note: Images are only uploaded to the current email.

Delete images

To delete images in a project, simply right-click on the name of the email or image in the side panel and click Delete from the context menu. 

Hop between emails in a folder

The sidebar will show you the emails in that folder so that you can easily duplicate, rename, move, or switch between them while remaining in your email. In this way folders can be used as "Projects" and can contain multiple HTML emails. You can also create New Emails in the current folder. To view the folders and settings of the account click "View Folders". 

Use the Context menu to take action on emails in the folder

context menu

Note: sub folders are not yet shown in the sidebar. Use the View folders button to view other folders on the account. 

Duplicate an email

To duplicate an existing email within Builder, click on the breadcrumbs next to the email name. You can also use the action menu in the navigation sidebar. 

duplicate in email view

Duplicating an email will create the email in the same folder as the original email (you can then move it to the appropriate folder). In addition, it will automatically name it "Copy of [Original email]". You can rename the email.

When you duplicate an email, it will only create the email in Builder and no Email Previews will be automatically generated. You can use the "Update Proof & Checklist" functionality to create the email in Checklist and Proof.

Download an email

To download an email, click Export > Download HTML. This will trigger an automatic .zip download of the email and any images uploaded to that specific email. The final email is compiled into one .html file. Even if your email stored CSS in the CSS tab in Builder, it would be injected into the .html file, making your email ready for a send.

Code Editor

The code editor is located in the middle of Builder, in between the sidebar and the preview pane. This is where you can input your HTML and CSS for your email. Switch between the code editor and visual editor using the Visual/Code toggle in the toolbar.

Note: certain user roles can not access the code editor due to restrictions on their permissions for editing email code. Read more about roles and permissions in this article.


The code editor has an HTML and CSS tab in the top right corner. All HTML content for the email can be placed in the HTML tab and all CSS can be placed in the CSS tab. For CSS placed in the CSS Tab, the code is dynamically injected into the <head> of the HTML to render properly in the preview pane. CSS in the CSS tab is *not* inlined. You can easily toggle back and forth between both tabs and the code editor remembers your place in each tab.

*Note: Leaving the CSS tab empty and placing all CSS in the HTML tab still properly functions.


To collapse a block of HTML or CSS, simply click on the arrow next to the line number. Click on the arrow again to expand the code.


To access Find and Replace, click on Find in the menu and select one of the options. Or, use the shortcut command Cmd+F (Mac) or Ctrl+F (Windows).


To undo the most recent change to an email, simply use the shortcut command Cmd+Z (Mac) or Ctrl+Z (Windows). You have the ability to undo actions all the way to the last recorded save to an email.


There are two ways you can automatically insert images uploaded to an email into the code editor:

  1. Click on the filename of an image. This will automatically generate HTML code for the image in the current position of the cursor in the code editor.
  2. Drag a filename from the navigator into the code editor. This will automatically generate HTML code for the image in the current position of the cursor in the code editor.
The HTML code for images defines the source, height, and width of an image. Here is an example:
<code><img src="example.jpg" width="250" height="100" />

The code editor uses relative paths when referring to images uploaded into Builder. You will need to update your image links with absolute paths to where they are hosted in order for your images to render correctly in your final email.

All images to uploaded to Builder are hosted on a dedicated Amazon S3 server. Images uploaded to Builder should only be used in Builder for testing purposes. We strongly recommend hosting your own images either on your own dedicated server or through your own Email Service Provider for your final email.


Templates are stored emails that serve as a starting point for a new email. To access Templates, click on the Insert > Template menu item in the top left corner.



There are 2 types of templates in Builder:

  1. Default templates are templates that are automatically stored in every single user’s account and cannot be edited or deleted. These templates are a collection of the most popular and best rendering templates in the email design community.
  2. User templates are templates users can create, edit, and manage themselves right in Builder.

To load a template into your current email, simply click on it in the Templates library. This will automatically insert the template code into the code editor.


To create a custom template, navigate to your Design Library and click on the New Template button at the top right. For more on the Design Library, check out this article.

To search for Templates, use the search bar at the top right. Inputting specific search terms will automatically filter the grid of Templates only display Templates that match the search terms in real time.


Partials are completely dynamic - editing and saving a partial will update that partial across all emails where that partial is used. This is helpful for updating and maintaining your emails for items like headers, footers, CSS reset styles and commonly used components. Think of it as CSS for HTML blocks of code. To access Partials while building, click on the Insert > Partial menu item in the top left corner.


To create a custom Partial, navigate to your Design Library and click on the  New Partial button at the top right. For more on the Design Library, check out this article.

To search for Partials, use the search bar at the top right. Inputting specific search terms will automatically filter the grid of Partials only display Partials that match the search terms in real time.


Snippets are code or text blocks you can assign shortcut commands to in the code editor. To access Snippets, click on the Insert > Snippet menu item in the top left corner.



To create a new Snippet, click on the Create A New Snippet button in the top right of the Snippets section. A Snippet has 3 key components:

  • Title - this will be the display name in the list of Snippets and what will be searchable in the search bar
  • Trigger - this is the shortcut command to be used in the code editor to generate the defined block of code or text
  • Snippet Code - this is the block of code or text that will be generated when a Snippet is used in the code editor

To save a new Snippet, simply click on the Create Snippet button below the Snippet Code text input area. You can make edits to any part of any Snippet at any time. Simply hit the Update Snippet button to save your changes.


To add an edit point inside a snippet, simply use any text inside of braces (i.e. {edit}). For example, if you have a snippet with a trigger of table1 that outputs <table width="{edit}">, after triggering the snippet with the tab key it will automatically jump to and highlight the {edit} point. Once the edit point is updated with its value, hitting the tab key again will jump to the next edit point of the snippet. There is no limit to how many edit points can be in a snippet.


To delete a Snippet, simply click on the Delete link next to the Snippet title in the list view of Snippets. This will automatically delete the Snippet. The Delete link will only appear on active or selected Snippets.


To search for Snippets, use the search bar at the top right. Inputting specific search terms will automatically filter the list of Snippets on the list to only display Snippets that match the search terms in real time.


To use a Snippet in the code editor, simply type the Snippet trigger in the code editor and then hit the tab key. This will automatically generate the defined Snippet Code right in the code editor.


The Timeline is an area to view all the saves and changes to an email. To access the Timeline, simply click on the Last saved timestamp in the toolbar.



You can view a saved version of an email by clicking on a version on the left-hand side. Each saved version displays the time the email was saved and which user made the save. The actual preview of the email is displayed on the right-hand side. To view the code of that specific email, simply click on the Code toggle on the top right of the preview pane.


To restore a specific version of an email, select that version of the email and click on the Restore This Version button in the top right. This will automatically restore the specific version back into the code editor and preview pane.

Tracking Manager

When you are in a Builder project, click on  Tracking in the top menu and select UTM Manager to open the UTM Manager. In the UTM Manager modal, simply input your UTM tracking code and click Save tracking code. The UTM Manager will automatically detect and display any links in the email and group links by domain. You can easily select which links to apply the UTM tracking code to by checking or unchecking them. By default, all links are selected. To edit the tracking code, click the Edit tracking code link which will bring up the text input field to edit the tracking code and click Update when finished editing. When finished, simply click Apply Code to save the tracking code to the selected links. The tracking code will automatically be applied in the Browser preview. You can grab the final HTML with tracking codes added in two ways.

  • First, you can click on Copy HTML in the Export menu. This will bring up a modal for you to click and copy the final HTML version of the email.
  • Second, you can download the entire email either via the keyboard shortcut command (Cmd+D on Mac or Ctrl+D on Windows) or clicking on the Download HTML option in the Export menu. This will create a .zip download of the entire email, including an original HTML version, compiled HTML version, and images. The final compiled HTML version will be saved with the -compiled.html extension.

Email Analytics Integration

In the Tracking menu, you'll also see an option for Email Analytics. This allows you to create a new Litmus tracking code that you can insert right into your Builder email in the correct location. Creating the tracking code will also set up a new campaign in your Analytics section. If you already have a campaign created, you can also choose the Use existing tracking code option  and select it from the list.

Preview Pane

The preview pane can be located on the right-hand side of Builder. The preview pane has two views: Browser and Email Previews. The Browser view is a real-time preview of the code editor. The Email Previews view captures real-time screenshots of what the email looks like in 90+ email clients. *Note: Since Builder is a web app, the preview pane uses the native rendering engine of the browser you’re using. Firefox uses Gecko, Chrome/Safari use WebKit, and Internet Explorer uses Trident.


In the preview pane, there is an image on/off toggle. Images are on by default. Clicking the images icon will toggle images off. This allows you to more easily style ALT text and get a baseline view of what your email will look like with images off. *Note: Every email client renders images off view differently. The images off view in Builder is not an exact representation of what your email will look like in many email clients, but rather a baseline. We highly recommend testing your email for best results.


In between the code editor and the preview pane is a divider which can actually be dragged to resize the preview pane. When dragging the preview pane, its width and height dimensions are updated in real-time in the lower right side of the preview pane. There is also a mobile icon and desktop icon in the top right of the preview pane. Clicking on the mobile icon will resize the preview pane to a width of 320px and clicking on the desktop icon will resize the preview pane to a width of 800px. Additionally, you can click on the popout icon at the top left of the preview pane to pop out the preview pane. Popping out the preview pane opens the preview pane in a brand new window and displays a split view of mobile (on the left) and desktop (on the right). You can still resize the preview pane when it’s popped out and its dimensions will still update on the lower right in each preview. Just like in the popped in view, you can drag the divider in between the mobile and desktop preview to resize the dimensions to be whatever you like. You can also tab over to view Email Previews just like when popped in. To exit the popped out preview pane, simply click on the ‘X’ browser window and the preview pane will pop back into its initial place in Builder.

resize preview pane


In the preview pane, there is an images on/off toggle. Images are on by default. Clicking the images icon will toggle images off. This allows you to more easily style ALT text and get a baseline view of what your email will look like with images off. *Note: Every email client renders images off view differently. The images off view in Builder is not an exact representation of what your email will look like in many email clients, but rather a baseline. We highly recommend testing your email for best results.


In the preview pane, you can toggle the grid view on/off. Grid view is disabled by default. Clicking the grid icon will toggle Grid View on. This view outlines all of your HTML elements to quickly identify and troubleshoot any layout issues. Hovering over an element will display its width and height pixel dimensions. Additionally, when in Grid View, you can click on any element in the preview pane and your cursor will jump to and highlight that spot in the code editor for easy navigation.


To capture screenshots in 90+ email clients, simply save the email using Cmd+S (Mac) or Ctrl+S (Windows). Saving the email automatically runs the test in every client possible!


To view a full screenshot capture of an email client, simply click on the preview thumbnail of that email client. This opens up the detail view for an individual email client. To return to the main Email Previews thumbnail grid, click on “Switch clients” or close (X) out of the detail view.


To view a mobile email client with its device chrome, simply click on the Mobile Device icon in the top left preview pane bar to toggle it on. This will allow you to view your email just as your subscribers would on that device, including scrolling.


You have the ability to pop out as many individual email clients as you'd like into their own separate windows for greater flexibility. Simply click on the pop-out icon on the lower right of each email client in the main Email Previews thumbnail grid view or click the popout icon in the top left in the email client detail view. Whenever you save an email (Cmd+S (Mac) or Ctrl+S (Windows)), the email will not only update in the Email Previews tab but also for all popped out email clients.


For email clients that have images off view, there is an image on/off toggle in the detail view. Screenshots with images enabled are shown by default. Clicking the images icon will toggle images off. This allows you to more easily style ALT text and get a baseline view of what your email will look like with images off.


In the preview pane, you can toggle on the Processed HTML view. A first-in-class feature, Processed HTML support makes troubleshooting emails easier than ever. Processed HTML in Litmus shows what each email client actually processed your email markup into, making it easier than ever to pinpoint and diagnose rendering issues. Use it with Grid View to easily identify the cause of any issues. Processed HTML support is available for all email clients, except for:

  • Lotus Notes 7
  • Windows 10 Mail

In the preview pane, you can toggle on Code Analysis. When building or editing an email or template in Litmus Builder, you can toggle on Code Analysis in the detailed view of an individual email client. Any unsupported HTML or CSS properties in that specific email client will be highlighted, saving you countless hours of troubleshooting. With Code Analysis activated, you can toggle through dozens of email clients to see support for HTML and CSS in each of those clients.


To customize which email clients display when you test, simply hit the “Configure Clients” link. Then, select which clients to display by toggling on/off in the Configure Clients modal and hit “Save.”


In the rare case Litmus returns an Email Preview screenshot with an error (i.e. images didn't load, the email was cutoff, etc.), you can recapture the screenshot when in detail view for an email client by using the keyboard shortcut 'R'. You may only recapture up to 5 screenshots per minute.

ESP Syncing

ESP sync makes it fast and easy to sync your code from Litmus to your Email Service Provider (ESP) or run spam tests without even switching tools. To sync an email with your ESP in Builder, click on the Export menu and choose Sync to ESP. Then simply select the ESP account you want to sync with.

ESP syncing

We currently have ESP Syncing support for the following ESPs:

  • MailChimp (Plus plans and above)
  • Campaign Monitor (Plus plans and above)
  • Salesforce Marketing Cloud, formerly ExactTarget (Available exclusively on Litmus Enterprise)
  • IBM Watson Campaign Automation, formerly Silverpop (Available exclusively on Litmus Enterprise)
  • Eloqua (Available exclusively on Litmus Enterprise)
  • Marketo (Available exclusively on Litmus Enterprise)

Setting up ESP sync is different for each Email Service Provider. To connect your ESPs, head to your Manage Email Service Provider page in your Litmus account and follow the prompts to sync to the ESP accounts you'd like (you can connect to multiple different ESPs!). Some ESPs require additional steps to get it set up. You can find full instructions below:

Find additional instructions on how to start a spam test using an ESP connection here.

Find FAQs for ESP sync here.




To share your email, click on the Share dropdown and choose either Get shareable link or Send a test email. To get a shareable link, simply toggle "Publish Email Previews + HTML." This will then provide two different URLs for sharing:

  • Email Previews (only): Perfect for sharing just the email previews with clients or colleagues
  • HTML + Email Previews: Perfect for sharing both the code and email previews with other designers and developers

You can also select which individual email clients to show in the published version.


To send a test email to yourself or a team member, click on the Share dropdown and select Send a test email. Then, select which user(s) in your account you would like to share your email with from the drop-down menu. (For privacy reasons, all recipients will need to be set up as a user in your Litmus account.) If you do not want to give the user Full permission, they can be set up as Read-only. When ready, click on the Send email button to automatically send a test email to the user listed.


Emmet is natively built into Litmus Builder—no extra setup is required or necessary. Visit Emmet's documentation to learn how to use it.

*Note: Snippets supercede single Emmet commands. So, if you have a snippet with a trigger of table, it will output the snippet instead of the Emmet string which would be <table></table>.Some abbreviations of Emmet do not work in Builder due to conflicting shortcut commands in the app. We recommend grouping abbreviations - i.e. (a{text}) - as a workaround for most conflicts.


Accessing Builder in Legacy Litmus

To access Builder in Legacy Litmus, simply click on Builder in the main navigation in Litmus. This will automatically direct you to the Builder Dashboard. This dashboard is a list of your Builder Projects. Builder projects are a collection of HTML emails and images in one place. 


To start using Builder, you must first create a new project. A project can contain one or more emails. There is no limit on how many emails are contained in an individual project.

To create a new project, simply click on the Create a new project button.

You then have 3 options: 1) upload your own HTML, 2) send a draft email, or 3) pick a template to start building and testing your email.


You will be prompted to name your project in a modal. Name your project in the text input field, paste your HTML in the markup text area, and click on the “Start testing” button. This will automatically open your Builder project in a new window and display your newly created project in your dashboard.


You will be prompted to create an static email address for your account. Once your static address is created, any email sent into your address will create a net new Builder project each time.


You will be prompted to name your project in a modal. Name your project in the text input field, select a template from the list provided, and click on the “Start building” button. This will automatically open your Builder project in a new tab and display your newly created project in your dashboard.


On the Builder projects index dashboard page, you can drag and drop HTML directly onto the screen to upload them as projects. A single HTML file will automatically redirect to that newly created Builder project. Multiple HTML files uploaded will display on the dashboard where you can then select which project to jump into. The dashboard will show all of your existing Builder projects as thumbnails. The thumbnail generated for each project is a screenshot of the most recently saved email in that project. It also displays the title of the project, the user who created the project, how many emails are in the project, and when the project was last updated.


To delete a Builder project, simply click on the delete trash icon for a project. A prompt will appear asking you to confirm the deletion of this project. Simply click OK and your project will be deleted. A successful deletion message should appear right in the dashboard.

Build your next campaign →

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us