Visual Email Builder — Tiptap × React Email × Next.js
A drag-and-drop email builder that combines Tiptap for rich-text editing with React Email for generating cross-client compatible HTML. Build beautiful, responsive emails visually—export as HTML or reusable React Email templates.
Email Template Builder is a visual editor for creating professional email templates. Instead of writing HTML by hand or using limited drag-and-drop tools, you get:
- Visual block editor — Compose emails with drag-and-drop blocks
- Rich text editing — Full formatting powered by Tiptap
- Dark mode preview — Emulates email client color inversion (React Email 5.0)
- Design systems — Apply consistent brand styles across templates
- Export HTML — Download for any email service
- Export React Email — Generate
.tsxtemplates for code-based workflows
Light Mode
Dark Mode — React Email 5.0 emulates email client color inversion
| Layer | Technology | Purpose |
|---|---|---|
| Editing | Tiptap | WYSIWYG rich-text editor with JSON output |
| Preview | @tiptap/html | Convert JSON to HTML for canvas display |
| Export | @tiptap/static-renderer + React Email | Map Tiptap nodes to React Email components |
User Edits in Tiptap
│
▼
TiptapEditor → editor.getJSON() → JSONContent stored
│
├──────────────────────────────────┐
▼ ▼
Canvas Preview Email Export
@tiptap/html @tiptap/static-renderer
→ HTML for display → React Email components
→ render() → .html
email-template-builder/
├── app/
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Main entry point
│ └── globals.css # Global styles
├── components/
│ ├── email-builder/
│ │ ├── email-builder.tsx # Main builder component
│ │ ├── email-canvas.tsx # Email preview canvas
│ │ ├── block-renderer.tsx # Block rendering logic
│ │ ├── block-picker-toolbar.tsx
│ │ ├── properties-popover.tsx # Block property editing
│ │ ├── design-system-manager.tsx
│ │ ├── header.tsx # Builder header/toolbar
│ │ └── tiptap-editor.tsx # Rich text editor
│ └── ui/ # Shadcn/ui components
├── lib/
│ ├── email-renderer.tsx # HTML rendering
│ ├── tiptap-react-email-renderer.tsx # ← Tiptap to React Email mapping
│ ├── email-template.tsx # Template structure definitions
│ ├── design-system-context.tsx # Design system state
│ └── design-system-presets.ts # Built-in design systems
├── types/
│ └── email-builder.ts # TypeScript definitions
└── public/
Key files:
lib/tiptap-react-email-renderer.tsx— Maps Tiptap JSON nodes to React Email componentslib/email-template.tsx— Defines block types and template structurecomponents/email-builder/block-renderer.tsx— Renders blocks on canvas
| Block | Description |
|---|---|
| Heading | H1/H2/H3 with alignment and color |
| Text | Paragraph with full formatting |
| Image | Images with src, alt, dimensions |
| Button | CTA buttons with links and styling |
| Header | Brand header with logo |
| Columns | 2 or 3 column layouts |
| Divider | Horizontal rules |
| Spacer | Vertical spacing |
| Social Links | Social media icons |
| Footer | Footer text with formatting |
- Next.js 16 with TypeScript
- Tiptap 3.15 for rich-text editing
- React Email 1.0 for email rendering
- @tiptap/static-renderer for Tiptap to React Email mapping
- Radix UI + Tailwind CSS 4 for UI
- shadcn/ui component library
npm install
npm run devOpen http://localhost:3000 to see the app.
| Core | Export & Preview | UX & Polish |
|---|---|---|
✓ Dark mode for templates/blocks |
○ Output format preview (HTML, TSX) |
○ SVG animations for better UX |
✓ Design systems picker fix |
○ Multiple exports (PDF, SVG, image) |
○ Keyboard shortcuts (delete key) |
○ Move project to pnpm |
○ tiptap-to-react-email package |
○ OG tags for metadata/thumbnails |
○ Auth + database |
○ All 18 React Email blocks |
○ Real font and asset management |
○ Canvas improvements |
○ Proper email widths (standards) |
|
○ React drag for blocks |
||
○ Fix Column block behavior |
| Advanced Features | Management & Scale |
|---|---|
○ Template gallery (community) |
○ Workspace/projects management |
○ AI email strategizer/mapper |
○ Figma-derived reusable blocks |
○ i18n (multiple languages) |
○ Template branching/variants |
○ Auto brand/kit configuration |
○ Multiple templates in one shot |
○ Advanced templates (carousels, GIFs) |
○ Auto design system maker |
See CONTRIBUTING.md for guidelines.
Built by @noobships
MIT License - use it however you want.