The features other editors gate. In your repo. Free to embed.The features other editors gate. In your repo. Free to embed.

const editor = await init({
  container: '#editor',
  customBlocks: [
    {
      type: 'event-details',
      name: 'Event Details',
      description: 'Date, time, location, and a map link',
      fields: [
        { type: 'text',  key: 'eventName', label: 'Event Name', required: true },
        { type: 'text',  key: 'date',      label: 'Date',       default: 'April 15, 2026' },
        { type: 'text',  key: 'location',  label: 'Location' },
        { type: 'text',  key: 'mapUrl',    label: 'Map Link (optional)' },
        { type: 'color', key: 'accent',    label: 'Accent',     default: '#7c3aed' },
      ],
      template: `
        <div style="border: 2px solid {{ accent }}; padding: 20px; border-radius: 8px;">
          <h3 style="color: {{ accent }};">{{ eventName }}</h3>
          <p>📅 {{ date }} · 📍 {{ location }}</p>
          {% if mapUrl %}
            <a href="{{ mapUrl }}">View on Map →</a>
          {% endif %}
        </div>
      `,
    },
  ],
})

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',
  versionHistory: {
    list: (templateId) =>
      fetch(`/api/templates/${templateId}/versions`).then((r) => r.json()),

    // A listed version can omit content as a cache hint — the editor
    // calls get() the first time it's opened, then caches the result.
    get: (templateId, versionId) =>
      fetch(`/api/templates/${templateId}/versions/${versionId}`)
        .then((r) => r.json())
        .then((v) => v.content),

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

    restore: (templateId, versionId) =>
      fetch(`/api/templates/${templateId}/versions/${versionId}/restore`, {
        method: 'POST',
      }).then((r) => r.json()),
  },
})

let sessionId = ''

const editor = await init({
  container: '#editor',
  user: { id: currentUser.id, name: currentUser.name },
  // With collaboration on, load also returns the template's revision, and
  // save receives only a new name: content arrives through submit.
  templates: myTemplatesProvider,
  collaboration: {
    // Subscribe to the template's events, answer with its revision, locks
    // and members, and call the handlers for everything that follows.
    join: (templateId, session, handlers) => {
      sessionId = session.sessionId
      return myRealtime.join(templateId, session, handlers)
    },

    // api() is your fetch helper. A refusal rejects with the HTTP status as
    // statusCode and the response's code, or it is retried as a network error.
    submit: (templateId, batch) =>
      api(`/api/templates/${templateId}/operations`, {
        method: 'POST',
        headers: { 'X-Session-Id': sessionId },
        body: JSON.stringify(batch),
      }),

    operationsAfter: (templateId, revision) =>
      api(`/api/templates/${templateId}/operations?after=${revision}`, {
        headers: { 'X-Session-Id': sessionId },
      }),

    // Optional together: without them the editor takes no locks.
    acquireLock: (templateId, blockId) =>
      api(`/api/templates/${templateId}/locks`, {
        method: 'POST',
        headers: { 'X-Session-Id': sessionId },
        body: JSON.stringify({ blockId }),
      }),
    renewLock: (templateId, blockId) =>
      api(`/api/templates/${templateId}/locks/${blockId}`, {
        method: 'PUT',
        headers: { 'X-Session-Id': sessionId },
      }),
    releaseLock: async (templateId, blockId) => {
      await fetch(`/api/templates/${templateId}/locks/${blockId}`, {
        method: 'DELETE',
        headers: { 'X-Session-Id': sessionId },
        keepalive: true,
      })
    },
  },
})

await editor.load('tpl_123')

const editor = await init({
  container: '#editor',
  localization: { locales: ['en', 'de'], doNotTranslate: ['Acme'] },

  // Any object with translate(request, signal); no package needed. Your
  // backend calls DeepL, a translation management system or an LLM with
  // your keys. The editor masks merge tags and protected terms before the
  // call and checks every placeholder in the answer.
  translation: {
    async translate(request, signal) {
      const res = await fetch('/api/translate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(request),
        signal,
      })
      if (!res.ok) throw new Error(res.statusText)
      return res.json() // { fields: [{ id, text }] }
    },
  },
})

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)