Configure settings in Builder

Builder can be customized with settings that make your email development faster and more convenient for your workflow. Define your theme, font size, set auto-completion, format your code, and more! 

To configure your settings in Builder, select the gear icon in the bar above your code. Once you save your settings configuration, these settings will be saved and maintained for any emails you work on. Your settings are unique to you though, other users on the same account can configure their own settings.

Presentation options

Switch theme

Select a code editor theme from the dropdown box. Once you’ve selected your code editor theme, choose the green Save Settings button in the lower right corner and your theme will be updated.

Font size

To increase or decrease the font size in the code editor, select a font size from the dropdown box. Once you’ve selected your font size, select Save Settings and your font size will be updated.

Soft wrapping

Toggle soft wrapping on or off depending on how you would like to view your code for new lines to follow its parent indentation instead of line wrapping by default. Select Save Settings after any changes.

Top Did this help?

Automations options

Inline CSS

Toggle the Inline CSS option on or off in your Builder project. CSS inlining is an individual setting and only applies to your projects.

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

NOTE: Some CSS won’t be inlined automatically, such as media queries. If you ever want to exclude CSS from being inlined, you can use the data-ignore-inlining attribute on any <style> or <link> tag so that CSS won’t be inlined.

The Browser preview will display your inlined email with every edit you make in real-time. When you tab over to view Email Previews, 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 retrieve your final inlined HTML in two ways.

  1. In the Export menu, select Copy HTML. This will bring up a modal for you to copy the final inlined HTML version of the email.
  2. Download the entire email either via the keyboard shortcut command (Cmd+D on Mac or Ctrl+D on Windows) or select on the Download HTML option in the Export menu. 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 a -compiled.html extension.

Litmus CSS inliner rules

  • 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
  • <style> tag gets removed if it is empty and does not contain any CSS after inlining

Top Did this help?


The code editor has several different forms of auto-completion enabled by default.

  1. HTML tags: every time you open an HTML tag with “<” auto-completion 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 auto-completion on by default.
  3. Inline HTML attributes: auto-completion 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=””) auto-completion is triggered.
  5. Pre-existing CSS: any existing CSS either in an embedded style block in the head, in the CSS tab, or in Partials will be available as auto-completion values.
  6. Pre-existing images: any existing images uploaded to an email will be available as auto-completion values for image tags or background properties.

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.

Top Did this help?


Format document

Apply code formatting to the full email document with the keystroke trigger.

Format selection

Apply code formatting to text currently highlighted within the code editor with the keystroke trigger.

Top Did this help?

Format on paste

Toggle on so any time content is pasted into the document, the code formatter is applied.


Set your indentation to either be Tabs or Spaces.

Tab width

Set a value of your tab width to be between 1-8.

Top Did this help?

Indent <head> / <body> tags

If enabled, when running the formatter, the <head> and <body> tags will be indented from the <html> tag.

<script> / <style> indentation

Apply special formatting to <style> and <script> tags.

Top Did this help?

Newline limit

When running the formatter, limit the maximum number of newlines that can exist between lines of content within the document.

End with newline

On formatting, adds a newline character if one isn’t present to the end of the document.


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