English Français العربية

Easy Email Builder

Registre officiel Productivité

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

Code source Site web Documentation

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « 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
Configuration 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>"
            }
        }
    }
}

Variables d'environnement

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

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  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.

Questions fréquentes

Qu'est-ce que Easy Email Builder ?

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

Comment installer Easy Email Builder ?

Il s'exécute sur votre machine. Dans 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. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour Easy Email Builder ?

Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.

Easy Email Builder est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient Easy Email Builder ?

Il est publié par Shahkarkhan440. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.