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 Litmus platform and all emails in Litmus will have a Builder view for design, code editing and testing.

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

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 email

Then either choose a template or start with a blank email:

choose template

Builder view

Builder view contains an email/folder 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: Hover over the email/folder list side panel for quick access to switch between emails.

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.

OR:

  • 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

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: Use the View folders button to view other folders and sub-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 an email in builder 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.

HTML + CSS tabs

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.

Collapse HTML + CSS elements

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.

Find + Replace

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).

Undo actions

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.

Timeline

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.

timeline

Viewing a specific version

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.

Restoring a specific version

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.

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.

Browser

The Browser view shows a live preview of your email as you build. Additionally, clicking on any element in the Browser view will take you to the relevant code in Code Editor or editing options in Visual Editor.

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.

Resizing + Popping out/in the preview pane

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.

resizing + popping out the preview pane

Images

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.

Grid view

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.

Email previews view

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!

Detail view

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.

Device view in 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.

Popping out individual email clients

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.

Images on/off view

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.

Processed HTML view

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
Code analysis

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.

Configure 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.”

Recapture a screenshot

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)
  • Acoustic Campaign (formerly IBM Watson Campaign Automation) (Available exclusively on Litmus Enterprise)
  • Eloqua (Available exclusively on Litmus Enterprise)
  • Marketo (Available exclusively on Litmus Enterprise)
  • HubSpot (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.

Miscellaneous

Sharing

sharing an email

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.

Send a test email

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 integration

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 supersede 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.

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