Working with Builder

Litmus Builder is a code editor specifically built for email design and development. All emails in Litmus will have a Builder view for design, code editing, and testing. This article provides an overview of Builder, including how to rename, duplicate, save, and download an email.

Builder view

After you create an email, select the Builder tab. The Builder view contains an email and folder list slide out panel, an editor pane with both code and visual options, and a browser preview pane on the right side. The left side slide out panel shows all emails in the current folder. The gear icon at the left in the editor has settings for your editor view. The eye icon above the browser pane allows you to toggle a variety of settings and filters.

The Builder window with numbered callouts for 1 the slide out tray icon, 2 the visual or code editor selection buttons, and 3 the main browser preview area.

Top Did this help?


Saving your email

  • Use the shortcut command Cmd+S (Mac) or Ctrl+S (Windows) to automatically save the email, or
  • Select the Save button above the editor pane.

NOTE: Builder automatically saves your changes locally in your browser as you type but does not save to your account in Litmus without a manual save.  

Top Did this help?


Timeline

The Timeline allows you to view and restore all saves and changes to an email. To access the Timeline, select the Last saved timestamp link above the editor pane.

Arrow pointing to timeline Last saved link above Builder editor

Viewing a specific version

You can view a saved version of an email by selecting a version from the list. Each saved version displays the date and 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 then the Restore link on the right. This specific version will appear back in the code editor and preview pane.

Animation showing Last saved link selection, timeline with multiple versions of an email, viewing versions, switching from email to code view, and restoring a version back to the Builder pane

Top Did this help?


Breadcrumb menu

The breadcrumb button next to your email's name gives you several convenient email management options. Duplicate, rename, move, or delete your email quickly and easily!

Duplicate your email

Select Duplicate from the breadcrumb menu. Your duplicated email will be created in the same folder as the original. It will automatically be named Copy of [Original email]. You can rename a duplicated email or move it to another folder any time.

When you duplicate an email, it will only create the email in Builder and no email previews will be generated. Use Update Previews & QA or Update Proof & Previews tabs to create the email in the Previews & QA and Proof tabs.

Rename

SelectRename from the breadcrumb menu. You can change the name in the popup modal and select Save in the lower right corner. If you change your mind, use the close icon in the upper right corner to close the box.

Move

Select Move from the breadcrumb menu. You can choose an existing folder from the list in the popup modal or create a new folder with the link in the lower left. Use the Move button in the lower right to finish putting your email in its next folder.

Delete

Select Delete from the breadcrumb menu. You'll see a confirmation popup modal so you can verify the delete. If you accidentally delete an email, you can find it in your Litmus Deleted emails in your account settings. Your deleted emails are saved for 30 days before they are no longer available.

Top Did this help?


Export options

The Export menu allows you to copy and download your compiled HTML, or you can download the code directly.

Copy your HTML

Select Copy HTML from the dropdown. You'll see your compiled code appear in the modal and you can select the code in the window to one-click copy to your clipboard. You can also download the compiled code. If you use modules in your email build, the compiled version provides the full code of your partials and snippets.

Download your HTML

Select Download HTML from the Export dropdown to 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 will be injected into the .html file, making your email ready for a send. You also get the original raw code from Builder in a separate file if you coded in Builder.

Top Did this help?


Sharing options

The Share dropdown offers options to create a share link for your project three different ways, or to send a test email.

Get a shareable link

Create a public share link with the Publish option. Toggle the Publish Email Previews + HTML switch. You can change the email client selections you share. You get 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

Share by email

The Email option allows you to email your Builder project to any team members you select. You'll see a list of Litmus users and groups available in your account. For privacy and security, all recipients will need to be set up as users in your Litmus account. You can add users as Read-only to limit content access. Select the Send email button to automatically send a test email to the users you selected.

Embed your project

With the Embed option, you get custom embed code you can use to share your project anywhere you'd like, such as a private website for clients or colleagues to review your work.

Animation showing toggling the Publish switch, scrolling through email client selections, and indicating the two shareable linksenlarge Publish image

Email option selected showing names of available Litmus users and checkboxes to select them to receive your emailed Builder projectenlarge Email image

Embed option selected showing the custom embed code created for your projectenlarge Embed option

Send a test

The Send a test dropdown selection directly opens the Email option described in the section above.

Top Did this help?


Navigate folders using the sidebar

Builder's slide out folder menu gives you quick access to other emails in the same folder. You can create a new email and you'll find the breadcrumb menu for each email in the list.

Select View folders to see your folders or to create a new one. Use the funnel icon button to sort your folders by age or alphabetically.

Sidebar slideout menu showing emails in current folder and available breadcrumb menu for a selected email

Sidebar slideout menu showing folders and available filter icon to sort folders

Top

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