Code Editor in Litmus Builder
The code editor is located in the Builder view, between the sidebar and the preview pane. This is where you can input your HTML and CSS for your email. Switch between the code editor and visual editor using the Visual/Code toggle in the toolbar:
Note: certain user roles can not access the code editor due to restrictions on their permissions for editing email code. Read more about roles and permissions in this article.
HTML + 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 will still function.
Collapse HTML + 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 + 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).
Undo 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.
Customize the Code Editor
You can open the settings menu using the gear button at the top left of the code editor to select a color theme, change your font size, and more:
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 supersede 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.