English Français العربية

Easy Email Builder

السجل الرسمي الإنتاجية

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

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

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 (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>"
            }
        }
    }
}

متغيرات البيئة

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

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  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.

الأسئلة الشائعة

ما هو Easy Email Builder؟

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

كيف أثبّت Easy Email Builder؟

يعمل على جهازك. في 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 من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج Easy Email Builder إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل Easy Email Builder مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون Easy Email Builder؟

ينشره Shahkarkhan440. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.