Skip to main content

Template Editor

The Template Editor is where template authors build and maintain the system behind every email. It combines code editing, input modeling, assets, metadata, preview, and revision history in one workflow.

Top bar​

The top bar is where most high-level actions live:

  • module picker to switch between the template base and modules
  • History to open revision history
  • Preview to open a connected preview window
  • Create Revision to save a named milestone
  • Save to persist the current draft

The editor also supports Cmd/Ctrl + S for saving.

TODO: Add a screenshot of the Template Editor top bar with each action labeled.

Working areas​

The editor is organized around three main concerns:

  • code editor for HTML and Liquid
  • right-side tabs for settings, metadata, assets, and chat
  • preview window for checking how the template behaves in the Email Editor

Code editor​

The code editor lints your Liquid as you type. If you write invalid syntax — an unclosed {% for %}, an empty {{}}, a malformed expression — a red marker appears in the gutter next to the offending line and the affected text is underlined. Hover the marker for the message and the parser's location info.

This catches most "broken template" cases without having to open the preview window. Render-time issues that depend on values (for example a filter throwing on a particular input) are still surfaced separately by the render error banner in the preview.

Settings​

Use the Settings tab to create and manage the fields that marketers will work with.

This includes:

  • normal setting groups
  • conditional visibility
  • repeatable settings
  • feed-backed settings
  • validation rules on inputs
  • friendly labels on predefined color options for both color inputs and rich-text color palettes

Metadata​

Use the Metadata tab to manage module-level details such as:

  • module name
  • hidden status
  • thumbnail image
  • AI metadata used by Betty

AI Metadata is available for both the template base and individual modules.

This is not mainly for telling Betty how to build the template. It is for telling Betty how to use the template and modules well when she is helping marketers build emails.

At a high level:

  • use template-base AI metadata for guidance about the overall design system
  • use module AI metadata for guidance about one specific module

For the full model and examples, see Betty AI and AI metadata.

Assets​

Use the Assets tab to upload files and copy their URLs into your template or modules.

Chat​

If enabled, the Chat tab lets you work with Betty directly inside the Template Editor.

Betty can do everything the user can do through the UI, so she is useful both for making changes and for answering questions like:

  • "How do I set this up?"
  • "Can this template support that workflow?"
  • "Where should this setting live?"
  • "What is the best way to model this?"

Template base vs modules​

Use the template base for the shared wrapper around the whole email. This is where global HTML structure, common CSS, and shared sections usually live.

Use modules for repeatable content blocks that marketers add into emails.

As a rule of thumb:

  • if it appears on every email, it probably belongs in the template base
  • if a marketer might add it, remove it, or repeat it, it probably belongs in a module

Preview workflow​

Preview is especially useful when you need to see how settings behave for a marketer, not just whether the HTML compiles.

Use preview to check:

  • whether defaults look good
  • whether conditional visibility makes sense
  • whether repeatable settings are easy to work with
  • whether global template settings flow correctly into modules

TODO: Add a short video of switching modules, editing settings, opening preview, and creating a revision.

Render errors​

If your template or a module contains invalid Liquid (for example a {% for %} block without a matching {% endfor %}), the preview window shows a red banner at the top.

The banner tells you:

  • Where the error happened — either "Template base" or the module's name
  • Line and column parsed out of the Liquid error message
  • The error message itself (e.g. tag {% for product in product_items %} not closed)
  • A code snippet with a caret pointing at the offending column, available when you click "Show details"

Revisions​

Revision history is built into the editor. Use it to:

  • keep draft work safe
  • create named checkpoints before larger changes
  • inspect older versions
  • restore previous revisions
  • publish a revision when it is ready

If you are about to make a risky refactor, create a revision first.

TODO: Add a screenshot of the History panel showing draft and named revisions side by side.

  • Start with strong defaults so preview looks finished.
  • Keep module inputs focused and easy to scan.
  • Hide modules instead of deleting them when you may still need the code later.
  • Put global controls on the template base, not on every module.
  • Use revisions before large edits and before handing work to someone else.