Configuring settings in Builder

To configure your settings in Builder, click on the gear icon in the tab bar above your code:

Code editor theme

To edit your code editor’s theme, click on Settings (gear icon). 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, open the Settings menu or use their shortcut options. 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, open Settings and toggle the Inline CSS option on and click Save 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. )
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 Email 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.

First, in the Export menu, you can click on Copy HTML. This will bring up a modal for you to click and copy the final inlined HTML version of the email.
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 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 the -compiled.html extension.

Auto-completion

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

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 “
CSS properties - regular CSS properties in the document or in the CSS tab have auto-completion on by default.
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=”|”).
Inline CSS properties - when you use inline styling (style=””) auto-completion is triggered.
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.
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.

Tabs + spaces

In Settings, you have the ability to set your indentation to either be Tabs or Spaces and can set a value of your tab width to be between 1-8.

Soft wrapping

In Settings, you can enable soft wrapping for new lines to follow its parent indentation instead of line wrapping by default.