Lit Pigeon

Design responsive emails by dragging blocks around, then export MJML and HTML you actually own. Open source, ~17 kB, 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	✓	✗ React-only	Varies	✓	✗ Code-only
Mosaico	✓	✗ Knockout.js	~200 kB+	✗	✓
Lit Pigeon	✓ MIT	✓ Web Components	~17 kB gzipped	✓ Built-in	✓ Drag & Drop

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.

~17 kB Gzipped

Tiny footprint. ~5 kB core engine plus ~12 kB editor UI — no bloated dependencies.

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>