@lit-pigeon/editor

The Lit Web Components UI for the Lit Pigeon email editor — canvas, block palette, property panels, toolbar, drag-and-drop, layers, asset manager, merge-tag picker, and keyboard shortcuts. Importing the package registers the <pigeon-editor> custom element, so it works in any framework (or none).

Install

npm install @lit-pigeon/editor

Usage

Import the package once to define the custom element, then drop it into your markup:

<script type="module">
  import '@lit-pigeon/editor';
</script>

<pigeon-editor id="editor"></pigeon-editor>

<script type="module">
  const editor = document.querySelector('#editor');

  editor.addEventListener('pigeon:change', (e) => {
    console.log('document', e.detail.document);
  });
  editor.addEventListener('pigeon:ready', () => console.log('ready'));
</script>

document and config are set as live DOM properties (never stringified attributes). The main component class is also exported for direct use or type imports:

import { PigeonEditor } from '@lit-pigeon/editor';

Prefer a framework wrapper? See @lit-pigeon/react, @lit-pigeon/vue, @lit-pigeon/angular, and @lit-pigeon/svelte.

Part of Lit Pigeon — open-source drag-and-drop email editor.

License

MIT