{"repo":"unlayer/react-email-editor","free":true,"listed":false,"github":"https://github.com/unlayer/react-email-editor","clone":"git clone https://github.com/unlayer/react-email-editor.git","description":"Drag-n-Drop Email Editor Component for React.js","language":"TypeScript","stars":5202,"topics":["ai-assistant","ai-email","ai-email-assistant","ai-email-builder","ai-email-editor","ai-email-generator","ai-email-template-editor","ai-tools","builder","drag-and-drop","email","email-builder","email-editor","email-marketing","email-template","html-email","html-emails","react-component","template"],"license":"MIT","category":"saas_starter","readme_excerpt":"

React Email Editor

\n\n

\n Official React component for embedding Unlayer’s drag-and-drop email editor in your app.\n

\n\n

\n \"npm\n \"stars\"\n \"license\"\n \"downloads\"\n \"CI\n \"test\n

\n\n---\n\n## Introduction\n\nAdd a production-ready, drag-and-drop email builder to your React app with a single component. react-email-editor lets developers embed Unlayer, load and save designs, listen to editor events, customize configuration, and export responsive HTML.\n\nUse it when you need email template creation inside your app without building and maintaining a full visual editor from scratch.\n\n| Video Overview |\n| :---------------------------------------------------------------------------------------------------------------------: |\n| [![React Email Editor](https://unlayer.com/images/editor-video-thumb.png)](https://www.youtube.com/watch?v=qp9t74G4VyM) |\n| _Watch video overview: https://youtu.be/qp9t74G4VyM_ |\n\n## Live Demo\n\nCheck out the live demo here: https://react-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/react-email-editor/tree/master/demo/src))\n\n## Installation\n\nThe easiest way to use React Email Editor is to install it from NPM and include it in your own React build process.\n\n```\nnpm install react-email-editor --save\n```\n\n### Upgrading from 1.x\n\nVersion 2.0 is a modernization release — the component API is unchanged, and most apps can upgrade without code changes. Requirements and packaging did change:\n\n- **React >= 16.8** and **Node >= 18** are now required. (React 15–16.7 never worked with the hooks-based component in 1.7.x; 2.0 just enforces this at install time.)\n- **Import only from the package root.** Deep imports like `react-email-editor/dist/...` are blocked by the new `exports` map.\n- **The published code is ES2019.** If you support legacy browsers through an old toolchain that can't parse ES2019, stay on 1.x or transpile `node_modules`.\n- **Editors are now destroyed on unmount** (a long-standing leak fix).\n\nSee the [CHANGELOG](CHANGELOG.md) for the full list.\n\n## Usage\n\nRequire the EmailEditor component and render it with JSX:\n\n```tsx\nimport React, { useRef } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';\n\nconst App = (props) => {\n const emailEditorRef = useRef(null);\n\n const exportHtml = () => {\n const unlayer = emailEditorRef.current?.editor;\n\n unlayer?.exportHtml((data) => {\n const { design, html } = data;\n console.log('exportHtml', html);\n });\n };\n\n const onReady: EmailEditorProps['onReady'] = (unlayer) => {\n // editor is ready\n // you can load your template here;\n // the design json can be obtained by calling\n // unlayer.loadDesign(callback) or unlayer.exportHtml(callback)\n // const templateJson = { DESIGN JSON GOES HERE };\n // unlayer.loadDesign(templateJson);\n };\n\n return (\n
\n
\n \n
\n\n \n
\n );\n};\n\ncreateRoot(document.getElementById('app')!).render();\n```\n\nSee the [example source](https://github.com/unlayer/react-email-editor/blob/master/demo/src/example/index.tsx) for a reference implementation.\n\n### Next.js / React Server Components\n\nThe editor renders into the DOM, so the component is client-only. The published bundle includes the `'use client'` directive, so with the Next.js App Router you can import it directly from any Client Component — no `next/dynamic` workaround required.\n\n### Methods\n\nAll unlayer methods are available in the editor instance (`emailEditorRef.current.editor`). See the [Unlayer Docs](https://docs.unlayer.com/) for more information, or log the object in the console to explore it. Here are the most used ones:\n\n| method | params | description |\n| -------------- | ------------------- | ------------------------------------------------------- |\n| **loadDesign** | `Object data` | Takes the design JSON and loads it in the editor |\n| **saveDesign** | `Function callback` | Returns the design JSON in a callback function |\n| **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |\n\n### Properties\n\n- `editorId` {`String`} HTML div id of the container where the editor will be embedded (optional)\n- `minHeight` {`String`} minimum height to initialize the editor with (default 500px)\n- `onLoad` {`Function`} called when the editor instance is created\n- `onReady` {`Function`} called when the editor has finished loading\n- `options` {`Object`} options passed to the Unlayer editor instance (default {})\n - See the [Unlayer Docs](https://docs.unlayer.com/builder/installation) for all available options.\n- `style` {`Object`} style object for the editor container (default {})\n\n## Support\n\nThe email editor output is tested using the most popular email clients.\n\n| \"Gmail | \"Apple | \"Outlook | \"Yahoo! |\n| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ |\n\n## AI Assistant\n\nAdd AI-powered content creation to your embedded email editor.\n\nUnlayer’s [AI Assistant](https://unlayer.com/ai) helps users generate, rewrite, translate, and improve email content directly inside the editor. Developers can enable AI features through the editor configuration, giving users a faster way to create polished emails without leaving your app.\n\n## Custom Tools\n\nCustom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/builder/tools/custom)\n\n[![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/builder/tools/custom)\n\n## Localization\n\nYou can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)\n\n### License\n\nCopyright (c) 2026 Unlayer. [MIT](LICENSE) Licensed.\n","default_branch":"master","files":42,"tree":[".github/ISSUE_TEMPLATE/bug_report.yml",".github/ISSUE_TEMPLATE/config.yml",".github/dependabot.yml",".github/workflows/ci.yml",".github/workflows/release.yml",".gitignore",".nvmrc",".prettierignore",".travis.yml","CHANGELOG.md","CONTRIBUTING.md","LICENSE","README.md","demo/.npmignore","demo/index.html","demo/index.tsx","demo/package-lock.json","demo/package.json","demo/public/_redirects","demo/src/dashboard/DesignEdit.tsx","demo/src/dashboard/DesignList.tsx","demo/src/dashboard/index.tsx","demo/src/example/index.tsx","demo/src/example/sample.json","demo/tsconfig.json","demo/vite.config.ts","netlify.toml","package-lock.json","package.json","prettier.config.js","src/EmailEditor.tsx","src/index.ts","src/loadScript.ts","src/types.ts","test/index.test.tsx","test/legacy/react-legacy.test.tsx","test/loadScript.test.ts","test/ssr.test.tsx","tsconfig.json","tsup.config.ts","vitest.config.ts","vitest.legacy.config.ts"],"storefront":"/r/unlayer","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/unlayer/react-email-editor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}