Repolode
Enviar
unlayer

unlayer/react-email-editor

Componente React que incorpora o editor de e-mails drag-and-drop da Unlayer a um app React, com APIs para carregar, salvar e exportar designs como HTML.

Alternativa open source a:MailchimpStripo

Ver no GitHubSite
Estrelas
5,246
Forks
803
Issues abertas
247
Último commit
há 6 horas

O que é?

react-email-editor é o wrapper oficial para React do editor de e-mails drag-and-drop da Unlayer. Adicione o componente a um app React para oferecer aos usuários um editor visual de e-mails, sem precisar criar um do zero.

O componente expõe uma ref para a instância do editor subjacente, permitindo chamar métodos como loadDesign, saveDesign e exportHtml. Os designs são armazenados como JSON, e exportHtml retorna tanto o design quanto o HTML responsivo. Opções como minHeight, style e a configuração do editor são passadas por props, e é possível adicionar blocos de conteúdo personalizados usando as custom tools da Unlayer.

O pacote requer React 16.8 ou posterior e Node 18 ou posterior, e pode ser importado diretamente de Client Components do Next.js. O README lista Gmail, Apple Mail, Outlook e Yahoo! Mail como clientes testados.

Recursos principais

  • 01Incorpora um editor de e-mails drag-and-drop como um único componente React.
  • 02Carrega e salva designs de e-mail como JSON.
  • 03Exporta HTML responsivo junto com os dados do design.
  • 04Expõe métodos e eventos do editor por meio de uma ref e de callbacks.
  • 05Dá suporte a blocos de conteúdo personalizados usando custom tools.
  • 06Funciona em Client Components do App Router do Next.js sem precisar de soluções alternativas com importação dinâmica.

Casos de uso

  • Adicionar um criador de templates a um produto SaaS de marketing por e-mail.
  • Permitir que usuários finais criem newsletters ou layouts de e-mails transacionais dentro do app.
  • Gerar HTML de e-mail a partir de designs JSON armazenados em um fluxo de trabalho de back-office.

Início rápido

  1. 1

    Instale o pacote pelo NPM

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

    Importe EmailEditor e renderize-o com um ref e um callback onReady no seu app React

Antes de usar

  • Requer React 16.8 ou superior e Node 18 ou superior.
  • O editor é exclusivo do cliente e é renderizado no DOM, portanto não pode ser executado no servidor.
  • Os recursos completos do editor e o AI Assistant dependem de uma conta e configuração da Unlayer.

Tópicos

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

Perguntas frequentes

O que é react-email-editor?
Componente React que incorpora o editor de e-mails drag-and-drop da Unlayer a um app React, com APIs para carregar, salvar e exportar designs como HTML. react-email-editor é o wrapper oficial para React do editor de e-mails drag-and-drop da Unlayer. Adicione o componente a um app React para oferecer aos usuários um editor visual de e-mails, sem precisar criar um do zero.
react-email-editor é gratuito? Qual é a licença?
react-email-editor é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-email-editor ainda é mantido?
Manutenção ativa. O último commit de react-email-editor foi em 21 de out. de 2026.
Para que posso usar react-email-editor?
Adicionar um criador de templates a um produto SaaS de marketing por e-mail. Permitir que usuários finais criem newsletters ou layouts de e-mails transacionais dentro do app. Gerar HTML de e-mail a partir de designs JSON armazenados em um fluxo de trabalho de back-office.
Como instalar react-email-editor?
Instale o pacote pelo NPM: npm install react-email-editor --save Importe EmailEditor e renderize-o com um ref e um callback onReady no seu app React
Onde consigo react-email-editor?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/unlayer/react-email-editor

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados