Builder - Getting Started

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, you can access the Builder view using the "Builder" tab at the top of the page. 

The 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. In the upper left corner of the Builder view, you can Along the top of the Builder view is a toolbar with various buttons, and below that, you'll find the Editor and Preview panes. 

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:

• Select the "Save" button in the top left of the toolbar.

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.  

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.

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.

Rename your email

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

Duplicate an email

To duplicate an existing email within Builder, use the breadcrumb button next to the email name and select "Duplicate". You can also use the action menu in the navigation sidebar. 

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 a duplicated email as needed.

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 & Previews" functionality to create the email in the Previews & QA and Proof tabs.

Download an email

To download an email, use the Export button in the upper right corner and select "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 will be injected into the .html file, making your email ready for a send. 

Sharing an email

To share your email, click on the Share dropdown and choose either "Get shareable link" or "Send a test email". 

Get a shareable link

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.

Navigate folders using the sidebar

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 the Builder view. 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". 

Note: Use the View folders button to view other folders and sub-folders on the account.