Par avion · Open source · MIT

69kB

Lit Pigeon Post

Design emails visually.
Own the code you send.

Lit Pigeon is an open-source, drag & drop email editor built on web components. Drag blocks, export clean MJML or HTML — ~69 kB gzipped at load, no SaaS in the middle.

Try the Playground Star on GitHub

$ npm install @lit-pigeon/editor

◆ Live delivery preview lit-pigeon.wearesnx.studio/playground

The Lit Pigeon visual email editor: block palette, live email canvas, and properties panel

№ 01 — The field

Why another email editor?

Because the existing ones make you pick two: open source, a real visual editor, or a bundle you'd actually ship.

Solution	Open Source	Framework Agnostic	Bundle Size	MJML Export	Visual Editor
Unlayer	✗ Proprietary	✓	~300 kB+	✗	✓
GrapesJS	✓	✓	~250 kB+	✗ Plugin	✓
MJML / React Email	✓	✗ Code-first (React Email is React-only)	Varies	✓	✗ Code-only
Mosaico	✓	✗ Knockout.js	~200 kB+	✗	✓
Lit Pigeon	✓ MIT	✓ Web Components	~69 kB gzipped^*	✓ Built-in	✓ Drag & Drop

^* Initial JS of this site's playground (editor + core + Lit, gzipped). The TipTap rich-text engine (~140 kB gz) lazy-loads on first text edit. Other tools' sizes are their published editor bundles and vary by configuration.

№ 02 — The cargo

Everything the pigeon carries

A full email workflow — designing, importing, exporting, extending — with none of it locked behind a vendor.

Drag & drop editing

A visual editor with a block palette, reordering, multi-column layouts, undo/redo, and live device previews.

MJML in & out

Import existing MJML templates; export MJML or responsive HTML built for Gmail, Outlook, and Apple Mail.

Framework agnostic

Web components with Lit. First-party wrappers for React, Vue, Svelte, and Angular — or plain vanilla JS.

Lean footprint

~7 kB document core + ~48 kB editor UI (gzipped). The rich-text engine lazy-loads on first text edit — this demo boots on ~69 kB of JS.

AI-ready via MCP

An MCP server lets Claude, Cursor, or any MCP client author and edit emails in the same document format you ship.

Plugin system

Extend the editor with custom blocks, toolbars, and behaviors — inspired by ProseMirror.

№ 03 — The manifest

Take only what you need

Modular by design — one document format, focused packages around it.

@lit-pigeon/core Document model, block types, and utilities

@lit-pigeon/editor Drag & drop visual editor web component

@lit-pigeon/renderer-mjml Render documents to MJML and HTML

@lit-pigeon/parser-mjml Import MJML into the editor format

@lit-pigeon/react React wrapper for the editor component

@lit-pigeon/vue Vue wrapper for the editor component

@lit-pigeon/svelte Svelte wrapper for the editor component

@lit-pigeon/angular Angular wrapper for the editor component

@lit-pigeon/ssr Server-side rendering of documents and templates

@lit-pigeon/rest REST adapter for headless rendering and linting

@lit-pigeon/mcp-server MCP server for AI-driven email authoring

№ 04 — First flight

Up and flying in a minute

One import, one element, any framework.

◆ quickstart postage paid

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

const editor = document.querySelector('pigeon-editor');
editor.document = createDefaultDocument('My Email');

import { PigeonEditor } from '@lit-pigeon/react';
import { createDefaultDocument } from '@lit-pigeon/core';

const doc = createDefaultDocument('My Email');

export default function App() {
  return <PigeonEditor document={doc} />;
}

import { PigeonEditorModule } from '@lit-pigeon/angular';

// In your module
@NgModule({ imports: [PigeonEditorModule] })

// In your template
<pigeon-editor [document]="doc"></pigeon-editor>

Design emails visually.Own the code you send.