Repolode
Предложить
unlayer

unlayer/react-email-editor

React-компонент, встраивающий drag-and-drop редактор писем Unlayer в React-приложение и позволяющий загружать, сохранять и экспортировать макеты в HTML через API.

Open source альтернатива:MailchimpStripo

Открыть на GitHubСайт
Звёзды
5,246
Форки
803
Открытые issues
247
Последний коммит
6 часов назад

Что это?

react-email-editor — официальная React-обёртка для drag-and-drop редактора писем Unlayer. Добавьте компонент в React-приложение, и пользователи получат визуальный конструктор писем — без необходимости создавать его с нуля.

Компонент предоставляет через ref доступ к экземпляру редактора, поэтому можно вызывать такие методы, как loadDesign, saveDesign и exportHtml. Макеты хранятся в формате JSON, а exportHtml возвращает и макет, и адаптивный HTML. Такие параметры, как minHeight, style и конфигурация редактора, передаются через props, а пользовательские блоки содержимого можно добавлять с помощью custom tools Unlayer.

Для пакета требуются React 16.8 или новее и Node 18 или новее. Его можно напрямую импортировать в Next.js Client Components. В README перечислены Gmail, Apple Mail, Outlook и Yahoo! Mail как проверенные почтовые клиенты.

Ключевые возможности

  • 01Встраивает drag-and-drop конструктор писем в виде одного React-компонента.
  • 02Загружает и сохраняет макеты писем в формате JSON.
  • 03Экспортирует адаптивный HTML вместе с данными макета.
  • 04Предоставляет доступ к методам и событиям редактора через ref и callbacks.
  • 05Поддерживает пользовательские блоки содержимого через custom tools.
  • 06Работает в Client Components Next.js App Router без дополнительных обходных решений с динамическим импортом.

Сценарии использования

  • Добавление конструктора шаблонов в SaaS-продукт для email-маркетинга.
  • Предоставление пользователям возможности создавать рассылки или макеты транзакционных писем прямо в приложении.
  • Генерация HTML писем из сохранённых макетов JSON в рабочих процессах бэк-офиса.

Быстрый старт

  1. 1

    Установите пакет из NPM

    npm install react-email-editor --save
  2. 2

    Импортируйте EmailEditor и отобразите его в приложении React, указав ref и callback onReady

Что важно знать

  • Требуются React 16.8 или новее и Node 18 или новее.
  • Редактор работает только на клиенте и отображается в DOM, поэтому его нельзя запустить на сервере.
  • Для доступа ко всем функциям редактора и AI Assistant необходимы аккаунт и настройка Unlayer.

Темы

#react#email-builder#drag-and-drop#html-email#email-template#react-component#ai-assistant#ai-email#ai-email-assistant#ai-email-builder

Частые вопросы

Что такое react-email-editor?
React-компонент, встраивающий drag-and-drop редактор писем Unlayer в React-приложение и позволяющий загружать, сохранять и экспортировать макеты в HTML через API. react-email-editor — официальная React-обёртка для drag-and-drop редактора писем Unlayer. Добавьте компонент в React-приложение, и пользователи получат визуальный конструктор писем — без необходимости создавать его с нуля.
react-email-editor можно использовать бесплатно? Какая у него лицензия?
react-email-editor распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
react-email-editor всё ещё поддерживается?
Активно поддерживается. Последний коммит в react-email-editor — 21 окт. 2026 г..
Для чего можно использовать react-email-editor?
Добавление конструктора шаблонов в SaaS-продукт для email-маркетинга. Предоставление пользователям возможности создавать рассылки или макеты транзакционных писем прямо в приложении. Генерация HTML писем из сохранённых макетов JSON в рабочих процессах бэк-офиса.
Как установить react-email-editor?
Установите пакет из NPM: npm install react-email-editor --save Импортируйте EmailEditor и отобразите его в приложении React, указав ref и callback onReady
Где скачать react-email-editor?
Исходный код и инструкции по установке — на GitHub: https://github.com/unlayer/react-email-editor

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты