pelliote-editor

A modern, beautiful email editor built with React and Rust/WASM. Features block-based editing, AI generation, mobile/desktop preview, dark mode support, and more.

✨ Features

• 🎨 Modern UI - Beautiful startup-style design with warm coral accents
• 📱 Responsive Preview - Desktop and mobile preview modes
• 🌙 Dark Mode - Preview emails in light and dark themes
• 🤖 AI Generation - Generate newsletters with AI (OpenRouter integration)
• ⌨️ Keyboard Shortcuts - Full keyboard navigation and shortcuts
• 🔤 Slash Commands - Quick block insertion with / commands
• 🎯 Drag & Drop - Reorder blocks with drag and drop
• ⚡ Rust/WASM - High-performance core engine
• 📦 Block Types - Text, Hero, Image, Button, Code, Callout, Social Links, and more

📦 Installation

npm install pelliote-editor
# or
yarn add pelliote-editor
# or
pnpm add pelliote-editor

🚀 Quick Start

import { EmailEditor, createEmptyDocument } from 'pelliote-editor';
import 'pelliote-editor/styles.css';

function App() {
  const [doc, setDoc] = useState(() => createEmptyDocument());

  return (
    <EmailEditor
      value={doc}
      onChange={setDoc}
    />
  );
}

📖 Usage

Basic Editor

import { useState } from 'react';
import { EmailEditor, createEmptyDocument } from 'pelliote-editor';
import 'pelliote-editor/styles.css';

function MyEmailEditor() {
  const [doc, setDoc] = useState(() => createEmptyDocument());

  return (
    <div className="h-screen">
      <EmailEditor
        value={doc}
        onChange={setDoc}
      />
    </div>
  );
}

With AI Generation

import { useState } from 'react';
import { EmailEditor, createEmptyDocument } from 'pelliote-editor';
import 'pelliote-editor/styles.css';

function MyEmailEditor() {
  const [doc, setDoc] = useState(() => createEmptyDocument());

  const handleAiAction = async (args) => {
    // Integrate with your AI provider (OpenAI, Anthropic, etc.)
    const response = await generateNewsletter(args);
    return response;
  };

  return (
    <EmailEditor
      value={doc}
      onChange={setDoc}
      onAiAction={handleAiAction}
    />
  );
}

Render to HTML

import { renderEmailHtml } from 'pelliote-editor';

// Get the HTML output for sending
const html = renderEmailHtml(doc);
console.log(html);

Parse HTML to Blocks (NEW!)

import { parseHtmlToDocument, parseEmailContent } from 'pelliote-editor';

// Convert stored HTML back to editable blocks
const htmlFromDb = '<div><h1>My Newsletter</h1><p>Content here</p></div>';
const doc = parseHtmlToDocument(htmlFromDb);

// Or use smart parser that handles both JSON and HTML
const content = /* JSON or HTML from database */;
const doc = parseEmailContent(content);

// Now you can edit it
setDoc(doc);

🎨 Styling

The editor comes with built-in styles. Import them in your app:

import 'pelliote-editor/styles.css';

The styles use CSS custom properties that you can override:

:root {
  --color-brand-500: #f97316;
  --color-surface: #fafaf9;
  --color-text-primary: #1c1917;
}

⌨️ Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo | | Ctrl/Cmd + B | Bold | | Ctrl/Cmd + I | Italic | | Ctrl/Cmd + U | Underline | | Ctrl/Cmd + D | Duplicate block | | Delete/Backspace | Delete selected blocks | | / | Open slash command menu | | Escape | Close menus / Deselect |

📦 Block Types

• Text - Rich text paragraphs with formatting
• Hero - Large banner sections with CTA buttons
• Image - Image blocks with alignment options
• Button - Call-to-action buttons with custom colors
• Two Column - Side-by-side layout
• Code - Syntax-highlighted code blocks
• Callout - Info, warning, success, error message boxes
• Social Links - Social media icon links
• Divider - Horizontal line separators
• Spacer - Vertical spacing

🔧 Props

EmailEditor

| Prop | Type | Description | |------|------|-------------| | value | EmailDocument | The document state | | onChange | (doc: EmailDocument) => void | Called when document changes | | onAiAction | (args: AiActionArgs) => Promise<EmailDocument> | Optional AI generation handler |

📄 Types

interface EmailDocument {
  children: Block[];
}

type Block = 
  | TextBlock 
  | HeroBlock 
  | ImageBlock 
  | ButtonBlock 
  | TwoColumnBlock
  | CodeBlock
  | CalloutBlock
  | SocialLinksBlock
  | DividerBlock 
  | SpacerBlock;

🛠️ Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Build with WASM rebuild
pnpm build:full

📜 License

MIT © Pelliote Team

🙏 Credits

Built with:

• React
• Rust + wasm-pack
• Tailwind CSS
• Lucide Icons
• Vite