The features other editors gate. In your repo. Open source.The features other editors gate. In your repo. Open source.

const editor = await init({
  container: '#editor',
  mergeTags: {
    syntax: 'liquid',
    // An optional sample is what previews render in place of the label,
    // so a preview reads like a delivered email instead of a list of
    // field names. Set one and a Sample / Label switch appears; set
    // none and the editor behaves exactly as it did before.
    tags: [
      { label: 'First name',      value: '{{first_name}}',  sample: 'Ada' },
      { label: 'Email',           value: '{{email}}',       sample: 'ada@example.com' },
      { label: 'Plan name',       value: '{{plan_name}}',   sample: 'Pro' },
      { label: 'Order ID',        value: '{{order_id}}',    sample: 'A-4417' },
      { label: 'Order total',     value: '{{order_total}}', sample: '$128.00' },
      // No sample — this one keeps its label and its highlight, so the
      // remaining highlights double as a list of what's still missing.
      { label: 'Unsubscribe URL', value: '{{unsubscribe_url}}' },
    ],
  },
})

const editor = await init({
  container: '#editor',
  logicTags: {
    tags: [{ label: 'Else', value: '{% else %}', group: 'Conditions' }],
    pairs: [
      {
        label: 'If VIP',
        before: '{% if customer.vip %}',
        after: '{% endif %}',
        group: 'Conditions',
        description: 'Show the wrapped copy only to VIP customers',
      },
      {
        label: 'Loop items',
        before: '{% for item in order.items %}',
        after: '{% endfor %}',
        group: 'Loops',
      },
    ],
  },
})

const editor = await init({
  container: '#editor',
  uiTheme: 'auto',
  theme: {
    '--tpl-color-primary':    '#0d9488',
    '--tpl-color-accent':     '#0ea5e9',
    '--tpl-color-background': '#ffffff',
    '--tpl-radius':           '10px',
    '--tpl-font-sans':        'Inter, system-ui, sans-serif',
    dark: {
      '--tpl-color-primary':    '#22d3ee',
      '--tpl-color-accent':     '#a78bfa',
      '--tpl-color-background': '#0b1220',
    },
  },
})

const editor = await init({
  container: '#editor',
  templates: {
    load: (id) =>
      fetch(`/api/templates/${id}`).then((r) => r.json()),

    create: (input) =>
      fetch('/api/templates', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(input),
      }).then((r) => r.json()),

    save: (id, patch) =>
      fetch(`/api/templates/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(patch),
      }).then((r) => r.json()),

    autoSave: true,
    onSaved: (template, { trigger }) => {
      if (trigger === 'manual') router.push(`/templates/${template.id}`)
    },
  },
})

// Opening a template is imperative — your app decides which one.
await editor.load('tpl_123')

const editor = await init({
  container: '#editor',
  // A top-level key, not part of the provider — presence features will
  // want the same answer. No user, and the panel reports itself
  // unavailable rather than writing an anonymous comment.
  user: { id: currentUser.id, name: currentUser.name },
  comments: {
    list: (templateId) =>
      fetch(`/api/templates/${templateId}/comments`).then((r) => r.json()),

    create: (templateId, input) =>
      fetch(`/api/templates/${templateId}/comments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(input),
      }).then((r) => r.json()),

    update: (templateId, commentId, patch) =>
      fetch(`/api/templates/${templateId}/comments/${commentId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(patch),
      }).then((r) => r.json()),

    delete: (templateId, commentId) =>
      fetch(`/api/templates/${templateId}/comments/${commentId}`, {
        method: 'DELETE',
      }).then(() => undefined),

    // Takes the target state, not a toggle — two clicks in flight can't
    // leave a thread inverted.
    setResolved: (templateId, commentId, resolved) =>
      fetch(`/api/templates/${templateId}/comments/${commentId}/resolve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ resolved }),
      }).then((r) => r.json()),
  },
})

const editor = await init({
  container: '#editor',
  testEmail: {
    // The whole integration. A Test button appears in the header, and
    // the address the user picks is handed to you.
    send: async ({ recipient, content }) => {
      const res = await fetch('/api/test-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ recipient, content }),
      })

      // Your message reaches the user verbatim — write it for them.
      if (res.status === 429) throw new Error('Too many test emails — try again in a minute.')
      if (!res.ok) throw new Error('Could not send the test email.')
    },
  },
})

const editor = await init({ container: '#editor' })

// Loads the renderer on first call — custom blocks resolve automatically.
const mjml = await editor.toMjml()

// Compile MJML to HTML with whichever MJML library you prefer.
const { html } = mjml2html(mjml)