How do I use Litmus Builder?

Just getting started with Litmus, or want to get a complete how-to of everything in our tool? Look no further than this guide on how to use Litmus Builder:

What is Litmus Builder?

Build your email in our web-based editor and get instant previews in 50+ email clients as you go. Every change you make updates your previews in real time, so you can build, test, and troubleshoot faster than ever before. Litmus Builder is the fastest tool to build and test emails—it is the world’s first editor built specifically for email design and development.

Table of Contents

Overview video

How to Access Builder

To access Builder, simply click on Builder in the main navigation in Litmus. This will automatically direct you to the Dashboard.

Create A Project

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 two options: upload your own HTML or pick a template to start building and testing your email.

Paste HTML
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.

Start from scratch
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.

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.

Delete A Project

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.

Builder Setup

There are three main components to a main Builder project: the navigator, the code editor, and the preview pane.

Builder

Navigator

The navigator is the left sidebar in Builder. The navigator is where you can manage all of the contents in your projects, your emails and images. You can toggle to show/hide the navigator by using the keyboard shortcut Cmd+B or clicking on the View menu item and selecting Toggle Sidebar.

Create A New Email

There are three ways to create a New Email in a Builder project:

  1. Click on File from the menu and select New Email (⌘E)
  2. Click on the + icon at the top right of the Navigator.
  3. Right-click on an empty area in the Navigator and click New Email from the context menu.

Both of these actions will automatically create a New Email and directly place your cursor in a text input field to name the email. Hit Enter or click away from the input field to complete the action.

You can only have one new unsaved email at a time. In order to create another New Email, save the existing unsaved email.

Save an Email

There are three ways to save an email in Builder:

  1. Use the shortcut command Cmd+S (Mac) or Ctrl+S (Windows) to automatically save the email.
  2. Click on File from the menu and select Save.
  3. Right-click on the title of an email and select Save from the context menu.

Upload Images

There are three ways you can upload images to Builder:

  1. Toggle Sidebar from the View menu.  Click on the Upload Image  icon 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 project 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 Navigator 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.

Rename an Email

There are two ways to rename an email in Builder:

    1. Click the title of an email and it will automatically direct your cursor into a text input field to rename the email.
    2. Right-click on the title of an email and select Rename from the context menu. This will automatically direct your cursor into a text input field to rename the email.

Duplicate an Email

To duplicate an email, right-click on the title of an email and select Duplicate from the context menu. This will duplicate the email and create a separate version of the email in the same project. If any images are uploaded to the original email, those will be duplicated into the copy of the email as well.

Download an Email

To download an email, right-click on the title of an email and select Download from the context menu. 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.

Delete Emails and Images

To delete any emails or images in a project, simply right-click on the name of the email or image and click Delete from the context menu. A prompt will appear asking you to confirm the deletion of the email or image. Simply click ‘Ok’ and your email or project will be deleted. A successful deletion message should appear right in the dashboard.

Rename a Project

To rename a project, right-click on the title of a the project and select Rename from the context menu. This will automatically direct your cursor into a text input field to rename the email.

Downloading a Project

To download a project, right-click on the title of the project and select Download from the context menu. This will trigger an automatic .zip download of all the emails contained in the project. Each email will have its own folder in the .zip file with its assets inside of it.

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.

HTML and 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.

Tabs and Spaces

The code editor uses 4 spaces for tabs by default. Any text or code pasted into the code editor will automatically convert tabs to 4 spaces and automatically indent the code.

Collapse HTML and 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 and 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).

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

Using Uploaded Images in the Code Editor

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:

<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

Templates are stored emails that serve as a starting point for a new email. To access Templates, click on the Templates icon in the top right corner.

Templates

Types of Templates

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.

Loading a Template

To load a template into your current email, simply hover a template’s thumbnail and click on the Load Template button. This will automatically insert the template code into the code editor.

Creating a Custom Template

To create a custom template, click on the New Template icon at the top right. This will automatically launch you into a Templates project. This project is hidden from your main Builder dashboard and can only be accessed when creating a new template or editing an existing one. The Templates project will contain all custom templates created by a user. The Templates project functions just like a regular Builder project from there. Simply save a Template in order for it to show up in the Templates section.

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

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.

Snippets

Snippets are code or text blocks you can assign shortcut commands to in the code editor. To access Snippets, click on the Snippets icon in the top right corner.

Snippets

Creating A Snippet

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.

Edit Points in Snippets

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.

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

Searching for 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.

Using A Snippet in the Code Editor

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.

Subject Line Checker

Subject Line Checker lets your preview your from name, subject line, and preview text in real time in over 15 popular email clients.

Timeline

The Timeline is an area to view all the saves and changes to an email. To access the Timeline, simply click on the Timeline icon in the top right corner.

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.

Tracking Manager

When you are in a Builder project, click on the Tracking Manager icon in the top right to bring up the Tracking Manager modal. Simply input your tracking code and click Save tracking code. Tracking 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 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.

  1. First, in the HTML/CSS dropdown you can click on View Compiled. This will bring up a modal for you to click and copy the final HTML version of the email.
  2. 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’ button in the View Compiled modal. 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.

Preview Pane

The preview pane can be located on the right hand side of Builder. The preview pane has two views: Browser and Instant Previews. The Browser view is a real-time preview of the code editor. The Instant Previews view captures real-time screenshots of what the email looks like in 50+ 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.

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

Images On/Off View

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.

BROWSER VIEW

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 pop-out 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. 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. Images on/off view 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. 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.

INSTANT PREVIEWS VIEW

To capture screenshots in 50+ email clients, simply save the email using Cmd+S (Mac) or Ctrl+S (Windows). Simply 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 Instant Previews thumbnail grid, click on “Switch clients” or close (X) out of the detail view. 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 Instant 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 Instant Previews tab but also for all popped out email clients. Images on/off view For email clients that have an images off view, there is an images 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. 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.

Code Editor Theme

To edit your code editor’s theme, click on the File menu and select Settings. You can select a code editor theme from the dropdown box. Once you’ve selected your code editor theme, click “Save settings” and your theme will be updated.

Change Font Size

To increase or decrease the font size in the code editor, click on the View menu item and select Increase Font Size or Decrease Font Size or use their shortcut options. Or, click on the File menu item and select Settings. You can select a font size from the dropdown box. Once you’ve selected your font size, click Save Settings and your font size will be updated.

Inline CSS

When you are in a Builder project, click on the File menu and Settings. Toggle the “Inline CSS” option to be on and Save Your Settings.

*Note: CSS inlining is an individual setting, not an account one. It will only apply to you and nobody else.

Any embedded CSS in the <head> of a document or CSS in the CSS tab will now automatically be inlined in the preview pane. Your code in the code editor won’t actually change, only the preview pane.

Some CSS won’t be inlined automatically, such as media queries, but if you ever want to exclude CSS from being inlined yourself – simply use the data-ignore-inlining attribute on any <style> or <link> tag and that CSS won’t be inlined.

Here’s a full list of rules for our CSS inliner:

  • Inlines any embedded styles in the <head> or CSS in the CSS tab
  • Does not rewrite CSS properties in any way (i.e. no re-ordering or converting to shorthand)
  • Does not strip any “@” CSS declarations (i.e. @media, @font-face, @keyframes, @import, etc.)
  • Does not strip Outlook conditional comments (i.e. <!–[if mso]–>)
  • Does not strip any pseudo selectors (i.e. :checked, :hover, :before, etc.)
  • Preserves character entities
  • Preserves CSS comments (i.e. /* I AM A CSS COMMENT */ ) for CSS that isn’t inlined
  • Preserves property cases (i.e. Margin: 5px; Padding: 10px;)
  • Preserves duplicate properties (i.e. display: block; display: inline-block;)
  • Preserves HTML5 elements (i.e. <video>, <audio>, etc.)
  • Does not inline .ExternalClass (a class specifically used for Outlook.com)
  • <style> tag gets removed if it is empty and does not contain any CSS after inlining
  • Prevent CSS from being inlined by using the HTML attribute data-ignore-inlining on any <style> or <link> element

The Browser preview will now display your inlined email with every edit you make in real-time. When you tab over to use Instant Previews of all the different email clients, we automatically capture the inlined version of your email. When you send a test email to yourself via the Share section, it will also send the inlined version.

When you’re done testing your email, you can grab your final inlined HTML in two ways.

  1. First, in the HTML/CSS dropdown you can click on ‘View Compiled’. This will bring up a modal for you to click and copy the final inlined HTML version of the email.
  2. 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’ button in the ‘View Compiled’ modal. This will create a .zip download of the entire email, including an original HTML version, inlined HTML version, and images. The final inlined HTML version will be saved with the -compiled.html extension.

Autocompletion

The code editor has several different forms of autocompletion enabled by default.

      1. HTML tags – every time you open an HTML tag with “<” autocompletion is then triggered. Every time you start to close an HTML tag with “
      2. CSS properties – regular CSS properties in the document or in the CSS tab have autocompletion on by default.
      3. Inline HTML attributes – autocompletion is triggered for all HTML attributes and if completed places the cursor automatically in the value field (i.e. width=”|”).
      4. Inline CSS properties – when you use inline styling (style=””) autocompletion is triggered.

Close Tags

When Close Tags is turned on, a closing tag will automatically be generated for any opening HTML tag written. For instance, if <table> is written, then a corresponding closing tag of </table> will be injected directly after it.

SHARING

Screen Shot 2015-11-09 at 11.40.34 AM

To share your email, click on the Share icon in the top right corner which will bring up the Share modal. To make the email public, select the Publish option and 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.

*Note: All publicly shared Builder emails are not dynamic. So, if you make any changes to the email and save, you will need to republish the project and grab a new URL.

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)

We plan on adding support for more ESPs in the future. You can vote on and request for your ESP on our public roadmap here.

SYNCING ERROR

There are several reasons why your campaign may not be syncing to your ESP. Here are common reasons:

  • Duplicate campaign name. You cannot sync an email with a title that already exists in your ESP. To fix this, simply change the title of your Builder document.
  • Unverified domain in MailChimp. If you are syncing to MailChimp, we populate a campaign from email address with the email address of the MailChimp account. MailChimp requires the from email address domain to be verified in order to sync properly. You can learn more about how to verify domains in MailChimp here.
  • MailChimp’s gallery has an upload limit of 1GB. If you exceed your storage limit in MailChimp’s gallery by attempting to sync images uploaded from Builder, the sync will error. Delete images to fall under the 1GB limit and re-try syncing.
  • Email is no longer in a draft state. If an email was previously synced and moved outside of a draft state in the ESP such as being sent or deleted, the sync will be unsuccessful. You will have to duplicate the document to attempt a brand new sync.
  • Campaign Monitor templates require template tags. You need at least one <singleline>, <multiline>, or <img editable>, <repeatertitle>, <tableofcontents>, and <unsubscribe> tag in your template when syncing to Campaign Monitor.
    Simply update your email/template with these changes and re-save to re-sync.
  • Campaign Monitor emails and templates require view online and unsubscribe links for every sync. Simply update your email/template with these changes and re-save to re-sync.
  • IBM Watson Campaign Automation (formerly Silverpop) does not support image syncing. You cannot sync images from Builder to IBM due to IBM’s lack of API support.

A best practice is if you ever encounter sync errors, please try re-syncing or make the appropriate changes and re-save your document to attempt a re-sync.

 

SETTING UP ESP SYNCING FOR SALESFORCE MARKETING CLOUD (FORMERLY EXACTTARGET)

Setting up SFMC requires some extra inputs: Username, Password, Client ID and Client secret.

Screen Shot 2017-07-21 at 10.41.38 PM

Follow these steps to configure your Client ID and Client secret:

  1. Visit https://appcenter-auth.s1.marketingcloudapps.com to create an App Center account (if you don’t have one). App Center documentation can be found here.
  2. Click on Create Account
    create-account
  3. Click on Create A New App
    create-new-app
  4. Select API Integration
    select-api
  5. Link your Salesforce Marketing Cloud account
    app-login
    acct-integration
  6. Grant access to all data types
    grant-access
  7. Retrieve your Client ID and Client secret
    client-id-client-secret

SETTING UP ESP SYNCING FOR IBM WATSON CAMPAIGN AUTOMATION (FORMERLY SILVERPOP)

Screen Shot 2017-07-21 at 10.49.11 PM

For IBM, you’ll have to define your server number. This is simply the number listed in your ‘engageX’ URL reference seen here:

engage-silverpop

 

SETTING UP ESP SYNCING FOR MARKETO

Setting up Marketo requires some extra inputs: Client Id, Client Secret, and the Identity URL and Endpoint URL from the REST API in your account. We currently only support syncing to Templates for Marketo ESP Syncing.

Screen Shot 2017-11-28 at 9.56.44 AM

  • Go to Admin > LaunchPoint
  • Create a New Service (select Custom as a the service type) Screen Shot 2017-11-28 at 10.01.02 AM and Screen Shot 2017-11-28 at 10.01.31 AM
  • Once service is created, get the Client Id and Client Secret by clicking on View Details Screen Shot 2017-11-28 at 10.01.48 AM and Screen Shot 2017-11-28 at 10.01.38 AM
  • Go to Admin > Web Services
  • Grab the Identity URL and Endpoint URL under the REST API section marketo-web-services

SEND A TEST EMAIL

To send a test email to any email address, click on the Share icon in the top right corner which will bring up the Share modal. Select the Email option and simply type in the email address(es) (separated by a comma for multiple) in the text input field. When ready, click on the Send email button to automatically send a test email to the email address(es) provided.

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

FAQ

Can my teammates use Builder?

All Builder projects can be accessed by active users under the same account. Read-only users will only have access to create, edit, and manage their own individual Builder projects.

Are snippets and templates individual to a user?

All snippets and templates are account-based. Users in the same account will see the same snippets and templates inside of Builder.

What service are you using to send email tests?

Builder uses Mandrill to send tests both to Litmus and to email addresses.

Does Builder have an API?

No, Builder does not currently have an API at this time.

Do you have webpage testing in Builder?

No, Builder does not currently support webpage testing.

Does Builder have support for preprocessing languages (Haml, Sass, etc.)?

No, Builder does not support preprocessing languages currently. It only supports HTML and CSS at the moment.

I can’t seem to test in Builder. Why?

In order to test in Builder, you must be a Litmus customer. Testing is a premium feature. If you are a Litmus customer and are experiencing issues, please email our support team.

A portion of my code is highlighted in magenta. Why?

The color indicates that there is a problem in the highlighted code. There may be a missing a closing character. e.g. “, ‘, < or >

Does Builder support web fonts and imports?

Yes, Builder can support web fonts with HTTPS addresses, but cannot support HTTP links. You’ll need to have SSL configured for the HTTPS links. This is necessary if you want to use the <link> or @import options, otherwise try using the @font-face method.

I have a killer feature idea for Builder.

Awesome! Please let us know any and all feedback at our support address. Also, please vote for features on our public roadmap board. We’re always interested to listen to customer ideas on making the product better =)

Now, build your own email!

Now that you know the ins and outs of Litmus Builder, it’s time to do what you do best—build emails! What will you create?

Build your next campaign →

Need more help?

Ask the world's largest community of email designers.

Post a discussion in the Litmus Community