React Email Editor
Componente React com licença MIT que embute o editor de e-mail de arrastar e soltar da Unlayer dentro do seu próprio produto
React Email Editor é um componente React que coloca um editor de e-mail de arrastar e soltar dentro do seu aplicativo, para que seus usuários desenhem os próprios e-mails sem que você precise construir um editor. O componente tem licença MIT, instala do npm em uma linha e soma 5.206 estrelas no GitHub em agosto de 2026 — mas o editor que ele desenha é o produto hospedado da Unlayer, e é essa a distinção que o selo de licença esconde. Ele decide com que rapidez você lança modelos de e-mail; não decide nada sobre se esses e-mails são abertos.
O que ele é, com precisão
React Email Editor (github.com/unlayer/react-email-editor) é o invólucro React oficial do editor visual de e-mail da Unlayer. Você renderiza um único componente de editor, guarda uma referência a ele e trabalha com os três métodos que o README documenta: loadDesign devolve um modelo salvo à tela, saveDesign entrega o design em JSON e exportHtml retorna HTML responsivo junto com esse JSON. O seu banco guarda o JSON para o usuário poder editar depois, e o HTML para o seu sistema de envio ter o que entregar. O repositório existe desde 2017 e é mantido com folga: a versão 2.1.2 saiu em 11 de agosto de 2026, e o trabalho por trás dela era correção de verdade, não faxina — uma falha de hidratação na renderização de servidor e um vazamento antigo em que os editores nunca eram destruídos ao desmontar.
A versão 2 é uma modernização, e as próprias notas de atualização são incomumente francas sobre o que mudou: React 16.8 e Node 18 passam a ser o mínimo, importações profundas para dentro do pacote ficam bloqueadas por um mapa de exports, e o código publicado é ES2019, então uma cadeia de ferramentas antiga que não consiga interpretá-lo deve permanecer na linha 1.x. O pacote traz a diretiva "use client", o que permite a quem usa o App Router do Next.js importá-lo direto em um Client Component em vez de recorrer ao contorno de sempre com importação dinâmica. A saída é testada em Gmail, Apple Mail, Outlook e Yahoo Mail — os quatro clientes em que HTML de e-mail escrito à mão mais costuma desmoronar.
Componente aberto, editor hospedado: leia a linha da licença duas vezes
O repositório é MIT e o README diz isso com todas as letras, mas MIT cobre o componente React, não o editor que ele carrega. Esse formato é comum em ferramentas para desenvolvedores e vale ser deliberado a respeito, porque "código aberto" no selo e "código aberto" no seu registro de riscos respondem a perguntas diferentes. Veja o que fica onde.
| O que você recebe | Onde isso vive | O que significa para você |
|---|---|---|
| O componente React | Seu repositório, via npm, sob MIT | Seu, para bifurcar, corrigir e fixar. Nada aqui pode ser tirado de você. |
| A interface de edição, as ferramentas e o assistente de IA | O serviço da Unlayer, carregado em tempo de execução e configurado pelas opções do componente | A capacidade dos seus usuários de editar depende de um terceiro estar no ar, e o conjunto de recursos segue o roteiro daquele fornecedor, não o do seu repositório. |
| O HTML exportado e o JSON do design | Seu banco de dados | A parte portátil. Os modelos já criados continuam sendo seus mesmo que você troque de editor mais adiante. |
| As traduções da interface do editor | Um repositório separado da Unlayer que aceita pull requests | Você pode contribuir com um idioma, mas contribui rio acima: não publica localmente. |
Onde um editor de e-mail entra no arsenal de crescimento de um fundador
A pergunta a resolver antes de instalar qualquer coisa é de quem são esses e-mails. Se são os seus usuários que redigem e enviam e-mail dentro do seu produto — um CRM, uma ferramenta de newsletter, um sistema de agendamento que manda confirmações que alguém quer com a própria marca —, um editor embutido é quase inevitável, e construir o seu são meses de trabalho que nada têm a ver com o motivo pelo qual compraram o seu produto. Se é só o seu e-mail transacional e de ciclo de vida, você não precisa de editor visual nenhum: modelos escritos em código como o React Email dão menos trabalho e versionam muito melhor.
- Resolve a produção, não a distribuição Um editor faz os e-mails serem criados mais rápido. Ele não tem opinião sobre quem os recebe, se o endereço é entregável ou se valia a pena mandar a mensagem.
- Tira uma fila da sua mesa O ganho real quando quem escreve são os seus usuários é que pedidos de modelo param de chegar como tíquetes de engenharia — o que é um argumento de carga de suporte, não de crescimento, e tudo bem comprá-lo nesses termos.
- Não decide a taxa de abertura A diagramação é a única parte do desempenho de e-mail que está praticamente resolvida. Assunto, momento do envio, qualidade da lista e reputação não estão, e nenhuma dessas coisas aparece em um editor.
- Acrescenta uma dependência em execução Um editor hospedado e embutido é um terceiro dentro do caminho crítico do seu produto. Vale aceitar isso conscientemente e verificar se os designs salvos continuarão abríveis caso um dia você pare de pagar por ele.
A nossa própria experiência tocando e-mail na AgentCeres — o Diretor de Crescimento com IA, em agentceres.com — aponta na mesma direção, e as duas coisas que importaram não foram diagramação nem ferramenta. A primeira foi subtrair: uma pessoa que se cadastrava e ficava alguns minutos no produto podia receber três mensagens quase idênticas em cerca de cinco minutos, quando a primeira pesquisa automática caía em cima do e-mail de boas-vindas e do aviso de teste. Apagamos um e-mail em vez de desenhar um melhor. Produção nunca foi a limitação; contenção foi. A segunda foi o idioma. Toda mensagem automática que enviamos leva versões escritas à mão para os mercados que atendemos, em vez de tradução automática, porque a passada automática soava exatamente como uma passada automática — e esse é justamente o trabalho em que nenhum editor de arrastar e soltar, por melhor que fosse, teria ajudado. Escolha o editor pelas mãos que vão usá-lo e gaste o tempo economizado em e-mails de ciclo de vida que valha a pena receber.
FAQ
- O React Email Editor é gratuito?
- O componente React do repositório tem licença MIT e é de uso livre. O editor que ele embute é o produto da própria Unlayer, então os termos e quaisquer limites do editor em si são definidos pela Unlayer e são separados da licença do repositório. Leia os dois antes de construir um recurso pago em cima disso.
- Qual a diferença para o React Email?
- O React Email é para os e-mails que você escreve: componentes no seu código, compilados para HTML e revisados em pull requests. O React Email Editor é para os e-mails que os seus usuários escrevem: uma tela visual dentro do seu produto que devolve HTML e um JSON de design. Públicos diferentes, e a maioria dos produtos precisa de apenas um deles.
- Funciona com o App Router do Next.js?
- Sim. O README informa que o pacote publicado inclui a diretiva "use client", então dá para importá-lo direto de um Client Component sem contornos com importação dinâmica. O editor continua sendo desenhado no DOM, então por natureza segue sendo apenas de cliente.
- Ele envia o e-mail?
- Não, e vale manter essa fronteira clara. Ele produz HTML e um JSON de design. Entrega, gestão de listas, supressões e reputação de remetente pertencem a uma infraestrutura de envio — uma opção auto-hospedada como o listmonk ou uma API de e-mail —, e são essas partes que decidem se a mensagem chega a alguma caixa de entrada.
- O que quebra ao atualizar da versão 1?
- A API do componente não mudou, então a maioria dos aplicativos atualiza sem tocar em código. O que mudou foram os requisitos: React 16.8 e Node 18 como mínimo, importações profundas para dentro do pacote agora bloqueadas e código publicado em ES2019. A versão 2 também passou a destruir os editores ao desmontar, o que corrige um vazamento mas é uma mudança de comportamento a conhecer se algo no seu aplicativo dependia do ciclo antigo.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.