Lit Pigeon

Design responsive emails by dragging blocks around, then export MJML and HTML you actually own. Open source, ~69 kB gzipped at load, no SaaS in the middle.

Try the Playground GitHub

npm install @lit-pigeon/editor

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

Why Lit Pigeon?

How it compares to other email editing solutions

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.

Features

Everything you need to build email templates

Drag & Drop

Visual editor with block placement, reordering, and multi-column layouts.

MJML Export

Render to MJML and responsive HTML built for Gmail, Outlook, and Apple Mail.

MJML Import

Import existing MJML templates into the editor for further editing.

Framework Agnostic

Web components with Lit. Wrappers for React, Vue, Svelte, and Angular — or use 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.

Plugin System

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

Packages

Modular architecture — use only what you need

@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

Quick Start

Get up and running in seconds

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>