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

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>
      `,
    },
  ],
})

import { createLocalStorageSavedBlocksProvider } from '@templatical/editor'

const editor = await init({
  container: '#editor',
  // Stores entries in localStorage — no backend, good for demos.
  savedBlocks: createLocalStorageSavedBlocksProvider(),
})

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',
  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.')
    },
  },
})