Open Source · Star on GitHub

Lit Pigeon

Open-source drag & drop email editor built with web components

Try the Playground GitHub

npm install @lit-pigeon/editor

Properties

Color

Padding

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 tested across 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 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/angular Angular wrapper for the editor component

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>