Easy Email Builder

Easy Email Builder

A drag-and-drop email template editor for React.

Live demo

• Visual editor with text, image, button, video, socials, columns and more
• Export to HTML and JSON
• Locked header and footer with ready-made templates
• 31 starter email templates
• Image and video upload hooks
• MCP server: design emails with Claude, Cursor, Codex and other AI agents

Use with AI agents (MCP)

Add Easy Email Builder to your favorite AI agent as an MCP server, then ask it to design an email. It returns the email HTML and a link that opens the result in the visual editor.

Claude Desktop: download the one-click extension easy-email-builder.mcpb, double-click it and click Install.

Claude Code

claude mcp add easy-email-builder --scope user -- npx -y easy-email-builder-mcp

OpenAI Codex

codex mcp add easy-email-builder -- npx -y easy-email-builder-mcp

VS Code (GitHub Copilot)

code --add-mcp '{"name":"easy-email-builder","command":"npx","args":["-y","easy-email-builder-mcp"]}'

Gemini CLI

gemini mcp add easy-email-builder npx -y easy-email-builder-mcp

Cursor, Windsurf, Cline and other MCP clients: add to the client's MCP config:

{
  "mcpServers": {
    "easy-email-builder": {
      "command": "npx",
      "args": ["-y", "easy-email-builder-mcp"]
    }
  }
}

Config file locations and troubleshooting: see the MCP server README.

Install

npm install easy-email-builder

Peer dependencies (React 18 and MUI 5):

npm install react@18 react-dom@18 @mui/material@5 @mui/icons-material@5 @emotion/react @emotion/styled react-syntax-highlighter

Usage

Give the editor a container with a fixed height:

import { EmailBuilder } from 'easy-email-builder';

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <EmailBuilder
        onChange={(json, html) => console.log(json, html)}
        imageUploadHandler={async (file) => {
          // upload the file and return its URL
          return 'https://example.com/image.png';
        }}
      />
    </div>
  );
}

Main props

Use a ref to read the current template:

const ref = useRef<EmailBuilderRef>(null);
ref.current?.getData((json, html) => save(json, html));

An HTML-only code editor is also available:

import { HtmlEditor } from 'easy-email-builder/html-editor';

Development

pnpm install
pnpm dev        # preview app (docs/)
pnpm build:lib  # build the library to dist/

License

MIT. Author: shahkar khan.