English Français العربية

Easy Email Builder

Official registry Productivity

Design HTML email templates with AI: render to HTML and open them in a visual editor

Source code Website Documentation

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

NPM package easy-email-builder-mcp
Claude Code 
claude mcp add easy-email-builder -e 'EASY_EMAIL_BUILDER_EDITOR_URL=<EASY_EMAIL_BUILDER_EDITOR_URL>' -- npx -y easy-email-builder-mcp@0.1.3
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "easy-email-builder": {
            "command": "npx",
            "args": [
                "-y",
                "easy-email-builder-mcp@0.1.3"
            ],
            "env": {
                "EASY_EMAIL_BUILDER_EDITOR_URL": "<EASY_EMAIL_BUILDER_EDITOR_URL>"
            }
        }
    }
}

Environment variables

  • EASY_EMAIL_BUILDER_EDITOR_URL Editor URL for preview links, if you host the editor yourself. Defaults to the public demo.

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. Easy Email Builder
  2. Use with AI agents (MCP)
  3. Install
  4. Usage
  5. Main props
  6. Development
  7. License

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

PropDescription
initialDocumentStarting template JSON
onChange(json, html)Called on every edit
imageUploadHandler(file)Upload an image, return its URL
videoUploadHandler(file)Upload a video, return its URL
initialName / onNameChangeTemplate name
showJsonFeaturesShow the JSON tab, import and export (default true)
editingSlot'header' or 'footer': open the editor locked to that region only; its HTML output contains just that region
themeCustom MUI theme

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.

Frequently asked questions

What is Easy Email Builder?

Design HTML email templates with AI: render to HTML and open them in a visual editor

How do I install Easy Email Builder?

It runs on your machine. In Claude Code: claude mcp add easy-email-builder -e 'EASY_EMAIL_BUILDER_EDITOR_URL=<EASY_EMAIL_BUILDER_EDITOR_URL>' -- npx -y easy-email-builder-mcp@0.1.3. For other clients, paste the JSON configuration from this page into their MCP settings.

Does Easy Email Builder need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is Easy Email Builder open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains Easy Email Builder?

It is published by Shahkarkhan440. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.