Better Email Design Systems (VS Code)
Live preview for Design Systems as Code by Better Email.
Thin client over the CLI: the extension starts better ds dev in your
workspace and opens the app-hosted preview (module switcher, real settings
sidebar, hot reload). It keeps the CLI as the single rendering engine.
New to design systems? Learn more here,
or read the docs on
how to build them.
Features
- Start and stop a live, app-hosted preview from VS Code.
- See unsaved changes in the running preview as you type.
- See
better ds check --json errors and warnings as VS Code diagnostics after
saving a managed Design System file.
- Open Modules, in
modules.order, from the Better Email activity-bar view.
- Get schema-powered autocomplete, hover documentation, and validation for
design-system.json, Module settings.json and module.json files. The
Template Base root settings.json uses its explicit $schema declaration.
- Complete Liquid values from the current Design System settings and hover an
input reference to see its name, type, and default value.
Liquid autocomplete scope
In base.liquid, autocomplete includes Template Base settings under
template.*, Global inputs under global.*, and runtime context.* values.
In a Module's module.liquid, its own settings are also available without a
prefix. Repeatable settings complete through the active for or tablerow
loop variable, and image and link inputs expose the same sub-properties as the
web editor. Open, unsaved settings.json buffers take precedence over the
on-disk file, so autocomplete follows setting edits before save.
The mirrored context list is context.isPreview,
context.integration.{id,name,type},
context.email.{subject,preheader,moduleKeys,language}, and
context.block.{id,moduleKey,previous.{id,moduleKey},next.{id,moduleKey}}. Feed
definitions are not available in a local checkout, so feed-backed settings
expose their authored inputs but not feed item fields.
The preview opens in your system browser, not an embedded VS Code webview. The
app preview needs WorkOS authentication cookies, and those cookies are not
available inside an isolated vscode-webview:// iframe.
Requirements
@better-email/cli installed (npm install -g @better-email/cli) and
logged in (better login)- A pulled Design System folder (contains
design-system.json)
Settings
betterEmail.cliPath — path to the better binary from
@better-email/cli. Defaults to better.
Commands
- Better Email: Start Local Preview — starts the dev server, opens the
preview in your browser; status-bar item while running
- Better Email: Stop Local Preview
Package for installation with
npx @vscode/vsce package --no-dependencies in this directory.
