The features other editors gate. In your repo. MIT-licensed.The features other editors gate. In your repo. MIT-licensed.

Custom blocks with API-backed data

Register your own block types — static templates or live data fetched from your API at preview time. Built in, not bolted on.

Ship CRM-aware blocks your team drops in without engineering tickets.

• Per-field config: text, image, color, select, repeatable arrays
• Static template or live API fetch at preview time
• Liquid templates with conditionals and built-in filters
• Type-safe block factories with full TypeScript types

Display conditions

Show or hide blocks based on recipient attributes, with live preview in the editor. Built in, not a paid add-on.

Personalize without bolting on a separate targeting service.

• Per-block show/hide rules from recipient attributes
• Live preview while editing
• allowCustom: true lets editors add conditions inline
• Custom wrappers — your ESP evaluates Liquid at send time

const editor = await init({
  container: '#editor',
  displayConditions: {
    conditions: [
      {
        label: 'VIP Partners',
        before: '{% if vip_partner %}',
        after: '{% endif %}',
        group: 'Audience',
        description: 'Show only to VIP partner accounts',
      },
      {
        label: 'Enterprise',
        before: '{% if plan == "enterprise" %}',
        after: '{% endif %}',
        group: 'Audience',
      },
      {
        label: 'Early Bird',
        before: '{% if early_bird %}',
        after: '{% endif %}',
        group: 'Registration',
      },
    ],
    allowCustom: true,
  },
})

Drop into any page — host CSS can't interfere

The editor mounts inside a Shadow DOM by default. Your app's stylesheets, design system preflight, and CMS template resets stop at the boundary — they never cascade into the toolbar, sidebar, or canvas.

Embed in any framework, CMS, or legacy app — no resets, no !important wars, no surprises after a design-system bump.

• Shadow DOM mount by default — no host CSS leaks in
• Editor styles can't leak out either (tpl: Tailwind prefix in light-DOM mode)
• Project your brand across the shadow boundary via --tpl-user-* CSS variables
• Opt out with shadowDom: false for light-DOM mount when you need it
• Multi-instance safe — each editor gets its own shadow root

const editor = await init({
  container: '#editor',
  // Shadow DOM by default — host stylesheets stop at the boundary.
  // Your design system's preflight, *{ box-sizing }, and body font
  // can't cascade into the editor. Set to false for a light-DOM
  // mount if you need to inspect editor nodes from host scripts.
  shadowDom: true,

  // To project your brand across the shadow boundary, set
  // --tpl-user-* CSS variables on the container (or any ancestor).
  // They inherit through the shadow root.
  theme: {
    '--tpl-user-color-primary': '#0d9488',
    '--tpl-user-font-sans':     'Inter, system-ui, sans-serif',
    '--tpl-user-radius':        '10px',
  },
})

Pluggable media library

A single onRequestMedia hook lets the editor open your media browser — S3, Cloudinary, your own CMS, anything. No vendor storage, no asset egress fees, no lock-in.

Reuse the asset pipeline you already run, end-to-end.

• One async hook returns { url, alt } — bring any backend
• Triggered from image blocks, image fields, and the toolbar
• Context-aware accept hint — the editor tells you what it wants
• No upload happens through Templatical — your storage, your auth
• Cloud build adds a managed media browser when you opt in

const editor = await init({
  container: '#editor',
  // Editor calls onRequestMedia when the user picks an image —
  // open your own asset browser (S3, Cloudinary, your CMS, etc.)
  // and resolve with { url, alt } — or null on cancel.
  async onRequestMedia({ accept } = {}) {
    const picked = await openAssetBrowser({
      accept,                 // e.g. ['images']
      endpoint: '/api/assets',
    })
    if (!picked) return null
    return { url: picked.url, alt: picked.alt }
  },
})