{"id":13514853,"url":"https://github.com/unlayer/react-email-editor","last_synced_at":"2025-05-14T08:05:16.091Z","repository":{"id":38274388,"uuid":"105479936","full_name":"unlayer/react-email-editor","owner":"unlayer","description":"Drag-n-Drop Email Editor Component for React.js","archived":false,"fork":false,"pushed_at":"2025-03-05T18:32:48.000Z","size":2237,"stargazers_count":4830,"open_issues_count":236,"forks_count":771,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-05-14T08:04:25.402Z","etag":null,"topics":["builder","drag-and-drop","email","email-builder","email-editor","email-marketing","email-template","html-email","html-emails","react-component","template"],"latest_commit_sha":null,"homepage":"https://unlayer.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unlayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-01T22:44:29.000Z","updated_at":"2025-05-13T17:01:36.000Z","dependencies_parsed_at":"2023-02-09T17:55:12.262Z","dependency_job_id":"f26d6f64-3856-4ad2-b0c5-fceeb39e3839","html_url":"https://github.com/unlayer/react-email-editor","commit_stats":{"total_commits":165,"total_committers":12,"mean_commits":13.75,"dds":0.5575757575757576,"last_synced_commit":"3e26711f4598feaeb5028a1a3940b27c7c07c2d9"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Freact-email-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Freact-email-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Freact-email-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unlayer%2Freact-email-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unlayer","download_url":"https://codeload.github.com/unlayer/react-email-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101588,"owners_count":22014907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","drag-and-drop","email","email-builder","email-editor","email-marketing","email-template","html-email","html-emails","react-component","template"],"created_at":"2024-08-01T05:01:02.731Z","updated_at":"2025-05-14T08:05:16.035Z","avatar_url":"https://github.com/unlayer.png","language":"TypeScript","readme":"# React Email Editor\n\nThe excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [React.js](http://facebook.github.io/react) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.\n\n|                                                          Video Overview                                                           |\n| :-------------------------------------------------------------------------------------------------------------------------------: |\n| [![React Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |\n|                                       _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                        |\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## Blog Post\n\nHere's a blog post with a quickstart guide: https://medium.com/unlayer-blog/creating-a-drag-n-drop-email-editor-with-react-db1e9eb42386\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## Usage\n\nRequire the EmailEditor component and render it with JSX:\n\n```javascript\nimport React, { useRef } from 'react';\nimport { render } from 'react-dom';\n\nimport EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor';\n\nconst App = (props) =\u003e {\n  const emailEditorRef = useRef\u003cEditorRef\u003e(null);\n\n  const exportHtml = () =\u003e {\n    const unlayer = emailEditorRef.current?.editor;\n\n    unlayer?.exportHtml((data) =\u003e {\n      const { design, html } = data;\n      console.log('exportHtml', html);\n    });\n  };\n\n  const onReady: EmailEditorProps['onReady'] = (unlayer) =\u003e {\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\n    // const templateJson = { DESIGN JSON GOES HERE };\n    // unlayer.loadDesign(templateJson);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={exportHtml}\u003eExport HTML\u003c/button\u003e\n      \u003c/div\u003e\n\n      \u003cEmailEditor ref={emailEditorRef} onReady={onReady} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById('app'));\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### 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/docs/getting-started#configuration-options) for all available options.\n- `style` {`Object`} style object for the editor container (default {})\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/docs/custom-tools)\n\n[![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)\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) 2024 Unlayer. [MIT](LICENSE) Licensed.\n","funding_links":[],"categories":["Editor Components","Design editor","TypeScript","Editing","others","JavaScript"],"sub_categories":["Email Builder \u0026 Visual Editing Component"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Freact-email-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funlayer%2Freact-email-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funlayer%2Freact-email-editor/lists"}