Qual framework de editor de texto rico escolher em 2025?

xguru · 2025-02-10T10:21:01+09:00

O editor de texto rico (WYSIWYG), hoje essencial em apps, é amplamente usado em serviços como Linear, Notion e Google Docs A Liveblocks analisou vários editores populares ao longo do último ano e organizou os pontos fortes e fracos de cada um Em geral, os editores se dividem em dois tipos: “core” e “battery-included” Se você só precisa de um editor simples, vale considerar uma opção mais leve; para criar um editor complexo com muitos recursos colaborativos, é melhor escolher algo com alta extensibilidade No geral, a escolha mais segura é o Tiptap, avaliado como uma opção equilibrada, rica em recursos sem ser excessivamente opinativa Colaboração Nós, da Liveblocks, temos focado em recursos de colaboração, e a maioria dos editores permite implementar colaboração em tempo real por meio da biblioteca CRDT Yjs Ao usar Yjs, é necessário um serviço de backend para armazenar os documentos e manter as conexões em tempo real A Liveblocks oferece um backend Yjs genérico que pode ser usado com vários editores compatíveis com Yjs, além de soluções integradas para Tiptap e Lexical Alguns editores também usam soluções próprias baseadas em OT (Operational Transform) ou serviços de nuvem de código fechado Avisos antes de começar Foram excluídos editores sem manutenção, como o Draft.js, editores com comunidades pequenas, ou editores de código-fonte privado, como o Froala Acessibilidade (a11y) exige algum nível de trabalho na maioria dos editores, então é preciso consultar a documentação de cada um Tiptap Editor que roda sobre o ProseMirror e abstrai sua complexidade para melhorar a experiência de desenvolvimento Em sua maior parte, é distribuído sob licença MIT, e recursos de colaboração em tempo real podem ser usados imediatamente com Tiptap Cloud, Liveblocks e outros Embora tenha muitos recursos, sua estrutura permite tree shaking, mantendo o tamanho do bundle core menor que o de Quill, Slate e Lexical Extensão O Tiptap foi projetado para facilitar a adição de nós, marks, comandos e extensões simples Quando necessário, também é possível sobrescrever o comportamento de extensões existentes para personalizar como quiser Algumas extensões “pro” são oferecidas de forma paga Personalização avançada Pode surgir a necessidade de lidar diretamente com a estrutura do ProseMirror Leva um tempo para se acostumar com abstrações próprias do Tiptap, como command chain O modelo de dados é baseado em schema, geralmente gerado automaticamente, mas em recursos avançados pode ser necessário manipulá-lo diretamente Limitações (Drawbacks) Pode haver confusão nas diretrizes por ser necessário alternar entre a documentação do ProseMirror e a do Tiptap O conteúdo relacionado a acessibilidade (a11y) depende bastante de quem implementa Percorrer desnecessariamente o estado do documento durante transações pode causar queda de desempenho Alterações no lado do servidor Não é simples manipular documentos no servidor usando apenas o Tiptap É preciso considerar usar diretamente o ProseMirror ou modificar manualmente o documento JSON A Liveblocks oferece uma biblioteca que facilita a modificação de documentos ProseMirror Colaboração em tempo real O Tiptap tem extensões que oferecem colaboração em tempo real com Yjs Pode ser integrado a várias soluções em nuvem, como Tiptap Cloud e Liveblocks O Liveblocks Text Editor também adiciona vários recursos além da colaboração em tempo real, como cursores, comentários, menções e histórico de versões Vantagens (Pros) Excelente documentação Ótimos recursos de colaboração em tempo real Independente de framework, com pacote dedicado para React Alta extensibilidade Integração possível com Liveblocks ou Tiptap Cloud Desvantagens (Cons) Pode haver perda de desempenho se as melhores práticas de uso não forem seguidas É necessário aprender a estrutura interna do ProseMirror para desenvolver recursos avançados Falta, por padrão, uma funcionalidade robusta de edição headless no servidor BlockNote O BlockNote é um editor baseado em blocos que estende Tiptap e ProseMirror, oferecendo recursos no estilo do Notion Como foi desenvolvido principalmente com foco em React, há a característica de ser difícil aproveitar os componentes de UI em outros frameworks Recursos necessários como menu de barra (slash menu) e toolbar flutuante já vêm incluídos, permitindo uso mais simples Limitações O BlockNote em si é open source, mas alguns recursos, como exportação para docx e PDF, exigem assinatura paga Colaboração em tempo real Suporta colaboração baseada em Yjs e Liveblocks Em breve deve oferecer integração oficial com Liveblocks Vantagens Baseado em Tiptap e ProseMirror, cuja estabilidade já foi comprovada Oferece colaboração em tempo real com Yjs e Liveblocks Fornece por padrão API de edição baseada em blocos e componentes de UI Desvantagens Projetado principalmente para React O tamanho do bundle é maior do que o de editores mais básicos Lexical Editor apoiado pelo Facebook (Meta) que vem recebendo grande atenção Após meses desenvolvendo extensões como comentários, menções, histórico de versões e colaboração em tempo real na Liveblocks, a impressão é de que ele ainda está em estágio inicial Atualmente está abaixo da versão 1.0 e continua sendo atualizado rapidamente Limitações Não há recurso de “pure decorations”, então funcionalidades como exibição de cursores exigem sobrepor elementos DOM separadamente sobre o editor O suporte básico de colaboração com Yjs ainda é frágil no tratamento de edge cases Existe um problema de nome do nó raiz hardcoded, o que dificulta usar vários editores ao mesmo tempo em um mesmo documento Colaboração em tempo real A implementação de colaboração no Lexical é difícil, a menos que se use o pacote da Liveblocks Em exemplos como StickyNotes, o contorno é criar vários nós raiz usando um documento e uma conexão de socket separados para cada um Como o desenvolvimento avança rápido, os problemas vêm sendo resolvidos de forma constante Extensão do Lexical O Lexical gerencia os dados por meio de uma hierarquia de nós É possível criar nós próprios herdando 4 tipos de nós core É possível ganhar velocidade com o LexicalComposer exclusivo para React e o pacote @lexical/react Para rodar o Lexical no backend sem DOM, pode-se usar o pacote @lexical/headless Alterações no lado do servidor É possível modificar documentos do Lexical no servidor, e a Liveblocks oferece uma biblioteca que simplifica isso Vantagens Suporta colaboração em tempo real com Yjs Independente de framework, com pacote dedicado para React Suporte da Liveblocks integrado a comentários, menções e histórico de versões Desenvolvimento muito ativo, grande comunidade e apoio da Meta Desvantagens A colaboração em tempo real com Yjs pode apresentar alguns bugs se edge cases não forem tratados manualmente Faltam recursos de pure decorations, e funcionalidades avançadas exigem contornos via DOM O pacote core é maior que o do Tiptap e do Slate Slate Framework de editor personalizável usado por Discord, Grafana, Sanity.io, Slite e outros A Liveblocks adota o Slate como padrão em seu próprio compositor de comentários A estrutura de dados é simples, permite controle total e pode ser usada de forma genérica além de React Extensão do Slate É possível estender o Slate por meio de vários exemplos e da documentação O ecossistema de plugins é limitado, mas não é tão difícil implementar por conta própria Existe um projeto chamado Plate como uma forma mais expandida Limitações Tem um tamanho de bundle um pouco maior que o do Tiptap Há poucos recursos nativos, então algumas partes precisam ser implementadas manualmente Colaboração em tempo real É possível implementar colaboração em tempo real em documentos Slate usando slate-yjs, @liveblocks/yjs e outros Vantagens Excelente suporte de documentação Suporte a colaboração em tempo real com Yjs Independente de framework, com pacote dedicado para React Alta extensibilidade Desvantagens Tamanho de bundle ligeiramente maior que o do Tiptap Falta de recursos nativos Quill Editor com histórico de uso em Slack, LinkedIn, Figma, Zoom, Miro, Airtable e outros O desenvolvimento ficou mais lento por um tempo, mas voltou a ganhar força com o lançamento da versão 2 em abril de 2024, incluindo uma reescrita em TypeScript Usa um modelo de documento próprio chamado Parchment, um conceito semelhante ao schema do ProseMirror Limitações Ao contrário do Lexical, não tem recursos de decoração pura, então funções como destaque colorido ou cursores de colaboração exigem sobreposição de elementos DOM separados Muitos plugins para Quill 2 ainda não foram atualizados A atividade da comunidade pode ser um pouco menor em comparação com outros editores Colaboração em tempo real É possível implementar colaboração em tempo real combinando Yjs com y-quill O backend separado pode usar várias abordagens, como Liveblocks Vantagens Excelente suporte de documentação Independente de framework, com pacote dedicado para React Suporte a colaboração em tempo real com Yjs Uso de formato delta simples Desvantagens Faltam recursos nativos e os plugins ainda não foram totalmente atualizados para o Quill 2 Falta de recursos de decoração pura Desenvolvimento relativamente menos ativo e comunidade menor Tamanho de bundle duas vezes maior que o do Tiptap ou Slate ProseMirror Framework central que serve de base para vários editores, como Tiptap, Remirror e BlockNote Garante operação estável com uma estrutura clara de schema, state, view, transform e outros Se a ideia for montar um editor do zero apenas com a biblioteca core, a quantidade de código tende a ser grande Limitações A própria documentação afirma que até para criar um editor simples é necessário bastante código Recomenda-se usar wrappers de nível mais alto, como Tiptap, Remirror e BlockNote A curva de aprendizado é relativamente alta, mas a documentação e a comunidade são bem organizadas Vantagens Excelente documentação com uma comunidade ativa Suporte a colaboração em tempo real com Yjs Desvantagens Exige muito código para implementar exemplos básicos Falta de recursos nativos Curva de aprendizado relativamente íngreme Plate Projeto baseado em Slate, no estilo “baterias incluídas”, que oferece plugins ricos como recursos de IA, menções e comentários É flexível, pois permite escolher apenas os recursos necessários Também oferece templates pagos e foi projetado exclusivamente para React Limitações Atualmente, a colaboração só tem suporte oficial via Hocuspocus, e é necessário implementar a integração com outros backends Yjs, como o Liveblocks Por ser exclusivo para React, a compatibilidade com outros frameworks pode ser limitada Como tem muitos recursos, o tamanho do bundle tende a crescer Vantagens Oferece uma biblioteca variada de plugins Suporte a recursos de edição no lado do servidor Fornece templates para acelerar o início do projeto Desvantagens Projetado exclusivamente para React Os recursos de colaboração só podem ser usados via Hocuspocus Tamanho de bundle maior do que o de editores mais básicos Remirror Editor baseado em ProseMirror, semelhante ao Tiptap, mas com uma abordagem mais “baterias incluídas” Suporta mais de 30 plugins, hooks para React, internacionalização (i18n), acessibilidade (a11y) e outros recursos É open source sob licença MIT e também oferece recursos de colaboração Limitações Tem uma comunidade menor que a do Tiptap e as atualizações podem ser mais lentas Há muitos recursos exclusivos para React, o que pode gerar limitações em outros ambientes O tamanho do bundle é relativamente grande Colaboração em tempo real O Remirror oferece suporte a colaboração com Yjs e Liveblocks por meio de YjsExtension Vantagens Excelente suporte de documentação Oferece uma biblioteca variada de plugins Suporte a colaboração com Yjs e Liveblocks Desvantagens Projetado exclusivamente para React Bundle maior Baixa frequência de atualizações e comunidade menor Editor.js Editor de texto rico com suporte a edição por blocos, com vários plugins e uma grande comunidade Tem uma estrutura de dados composta por blocos, inline e tune Não depende de framework e já inclui vários recursos convenientes, como tooltips Limitações Não há suporte oficial a colaboração em tempo real, e embora existam alguns PRs com essa proposta, o estado de manutenção é incerto Mesmo só com o pacote básico, o tamanho já é relativamente grande Colaboração em tempo real Não é suportada oficialmente Vantagens Oferece uma rica biblioteca de plugins com várias funcionalidades Suporte a integrações mantidas pela comunidade com vários CMS e frameworks de backend Desvantagens Bundle maior Ausência de colaboração em tempo real CKEditor Editor com mais de 20 anos de história, cuja versão atual (5) oferece uma estrutura moderna e recursos ricos Suporta vários frameworks, como Angular, React, Vue e Next É distribuído sob licença GPL-2, o que em certas situações exige open source, e para uso comercial é necessário comprar uma licença separada Limitações Muitos plugins são pagos, e os recursos de colaboração também só podem ser usados pelo serviço em nuvem do CKEditor A licença GPL-2 e o modelo de cobrança baseado em volume de carregamentos podem ser obstáculos para muitos usuários Colaboração em tempo real Fora o serviço proprietário em nuvem do CKEditor, não há outras soluções de colaboração disponíveis Vantagens Oferece muitos recursos de forma nativa Compatível com vários frameworks Desvantagens Os recursos de colaboração dependem do serviço em nuvem do CKEditor A licença GPL-2 pode ser uma limitação para alguns usuários Alguns recursos são oferecidos com cobrança baseada no uso TinyMCE Assim como o CKEditor, é um editor com mais de 20 anos de história e segue a licença GPL-2 Pode ser usado em vários ambientes, como Angular, React e Vue Existe um serviço de colaboração em nuvem com cobrança baseada no número de carregamentos Limitações Recursos importantes como Markdown, menções, comentários e tipografia avançada são oferecidos como plugins pagos Falta documentação sobre como manipular documentos no lado do servidor Colaboração em tempo real Fora a solução proprietária de colaboração do TinyMCE, não há outros métodos divulgados Vantagens Oferece muitos recursos de forma nativa Compatível com vários frameworks Desvantagens Os recursos de colaboração dependem do serviço Tiny Cloud A licença GPL-2 pode ser uma limitação para alguns usuários Alguns recursos são oferecidos com cobrança baseada no uso Resumo comparativo dos editores ProseMirror Framework: Vanilla Collaboration: Yjs Comments: não oferece (há exemplos) Mentions: pode usar o plugin Suggestion Server-side editing: é possível editar documentos no Node.js com prosemirror-state e prosemirror-model License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: disponível sem configuração via integração com Liveblocks, personalizável Mentions: disponível sem configuração via integração com Liveblocks, personalizável Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: disponível Mentions: disponível Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: disponível via Liveblocks ou exemplos personalizados Mentions: disponível Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, outros Collaboration: Liveblocks, Yjs Comments: disponível sem configuração via integração com Liveblocks, personalizável Mentions: disponível sem configuração via integração com Liveblocks, personalizável Server-side editing: disponível via Lexical ou pelo pacote Node.js Lexical da Liveblocks License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: não oferece (há exemplos) Mentions: há exemplos Server-side editing: não oferece License: MIT GitHub Stars: ⭐ 30k Plate Framework: exclusivo para React Collaboration: Hocuspocus (Yjs) Comments: disponível Mentions: disponível Server-side editing: disponível License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: não oferece (há exemplos) Mentions: pode usar bibliotecas de terceiros Server-side editing: não oferece License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: não suporta (há exemplos de terceiros) Comments: não oferece (há bibliotecas de terceiros) Mentions: não oferece (há exemplos) Server-side editing: não oferece License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: integração com CKEditor Cloud Comments: disponível Mentions: disponível Server-side editing: disponível License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, outros Collaboration: integração com Tiny Cloud Comments: integração com Tiny Cloud Mentions: disponível Server-side editing: não oferece License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 pontos por xguru 2025-02-10 | 14 comentários | Compartilhar no WhatsApp

O editor de texto rico (WYSIWYG), hoje essencial em apps, é amplamente usado em serviços como Linear, Notion e Google Docs
A Liveblocks analisou vários editores populares ao longo do último ano e organizou os pontos fortes e fracos de cada um
Em geral, os editores se dividem em dois tipos: “core” e “battery-included”
Se você só precisa de um editor simples, vale considerar uma opção mais leve; para criar um editor complexo com muitos recursos colaborativos, é melhor escolher algo com alta extensibilidade
No geral, a escolha mais segura é o Tiptap, avaliado como uma opção equilibrada, rica em recursos sem ser excessivamente opinativa
Colaboração
- Nós, da Liveblocks, temos focado em recursos de colaboração, e a maioria dos editores permite implementar colaboração em tempo real por meio da biblioteca CRDT Yjs
- Ao usar Yjs, é necessário um serviço de backend para armazenar os documentos e manter as conexões em tempo real
- A Liveblocks oferece um backend Yjs genérico que pode ser usado com vários editores compatíveis com Yjs, além de soluções integradas para Tiptap e Lexical
- Alguns editores também usam soluções próprias baseadas em OT (Operational Transform) ou serviços de nuvem de código fechado
Avisos antes de começar
- Foram excluídos editores sem manutenção, como o Draft.js, editores com comunidades pequenas, ou editores de código-fonte privado, como o Froala
- Acessibilidade (a11y) exige algum nível de trabalho na maioria dos editores, então é preciso consultar a documentação de cada um

Tiptap

Editor que roda sobre o ProseMirror e abstrai sua complexidade para melhorar a experiência de desenvolvimento
Em sua maior parte, é distribuído sob licença MIT, e recursos de colaboração em tempo real podem ser usados imediatamente com Tiptap Cloud, Liveblocks e outros
Embora tenha muitos recursos, sua estrutura permite tree shaking, mantendo o tamanho do bundle core menor que o de Quill, Slate e Lexical
Extensão
- O Tiptap foi projetado para facilitar a adição de nós, marks, comandos e extensões simples
- Quando necessário, também é possível sobrescrever o comportamento de extensões existentes para personalizar como quiser
- Algumas extensões “pro” são oferecidas de forma paga
Personalização avançada
- Pode surgir a necessidade de lidar diretamente com a estrutura do ProseMirror
- Leva um tempo para se acostumar com abstrações próprias do Tiptap, como command chain
- O modelo de dados é baseado em schema, geralmente gerado automaticamente, mas em recursos avançados pode ser necessário manipulá-lo diretamente
Limitações (Drawbacks)
- Pode haver confusão nas diretrizes por ser necessário alternar entre a documentação do ProseMirror e a do Tiptap
- O conteúdo relacionado a acessibilidade (a11y) depende bastante de quem implementa
- Percorrer desnecessariamente o estado do documento durante transações pode causar queda de desempenho
Alterações no lado do servidor
- Não é simples manipular documentos no servidor usando apenas o Tiptap
- É preciso considerar usar diretamente o ProseMirror ou modificar manualmente o documento JSON
- A Liveblocks oferece uma biblioteca que facilita a modificação de documentos ProseMirror
Colaboração em tempo real
- O Tiptap tem extensões que oferecem colaboração em tempo real com Yjs
- Pode ser integrado a várias soluções em nuvem, como Tiptap Cloud e Liveblocks
- O Liveblocks Text Editor também adiciona vários recursos além da colaboração em tempo real, como cursores, comentários, menções e histórico de versões
Vantagens (Pros)
- Excelente documentação
- Ótimos recursos de colaboração em tempo real
- Independente de framework, com pacote dedicado para React
- Alta extensibilidade
- Integração possível com Liveblocks ou Tiptap Cloud
Desvantagens (Cons)
- Pode haver perda de desempenho se as melhores práticas de uso não forem seguidas
- É necessário aprender a estrutura interna do ProseMirror para desenvolver recursos avançados
- Falta, por padrão, uma funcionalidade robusta de edição headless no servidor

BlockNote

O BlockNote é um editor baseado em blocos que estende Tiptap e ProseMirror, oferecendo recursos no estilo do Notion
Como foi desenvolvido principalmente com foco em React, há a característica de ser difícil aproveitar os componentes de UI em outros frameworks
Recursos necessários como menu de barra (slash menu) e toolbar flutuante já vêm incluídos, permitindo uso mais simples
Limitações
- O BlockNote em si é open source, mas alguns recursos, como exportação para docx e PDF, exigem assinatura paga
Colaboração em tempo real
- Suporta colaboração baseada em Yjs e Liveblocks
- Em breve deve oferecer integração oficial com Liveblocks
Vantagens
- Baseado em Tiptap e ProseMirror, cuja estabilidade já foi comprovada
- Oferece colaboração em tempo real com Yjs e Liveblocks
- Fornece por padrão API de edição baseada em blocos e componentes de UI
Desvantagens
- Projetado principalmente para React
- O tamanho do bundle é maior do que o de editores mais básicos

Lexical

Editor apoiado pelo Facebook (Meta) que vem recebendo grande atenção
Após meses desenvolvendo extensões como comentários, menções, histórico de versões e colaboração em tempo real na Liveblocks, a impressão é de que ele ainda está em estágio inicial
Atualmente está abaixo da versão 1.0 e continua sendo atualizado rapidamente
Limitações
- Não há recurso de “pure decorations”, então funcionalidades como exibição de cursores exigem sobrepor elementos DOM separadamente sobre o editor
- O suporte básico de colaboração com Yjs ainda é frágil no tratamento de edge cases
- Existe um problema de nome do nó raiz hardcoded, o que dificulta usar vários editores ao mesmo tempo em um mesmo documento
Colaboração em tempo real
- A implementação de colaboração no Lexical é difícil, a menos que se use o pacote da Liveblocks
- Em exemplos como StickyNotes, o contorno é criar vários nós raiz usando um documento e uma conexão de socket separados para cada um
- Como o desenvolvimento avança rápido, os problemas vêm sendo resolvidos de forma constante
Extensão do Lexical
- O Lexical gerencia os dados por meio de uma hierarquia de nós
- É possível criar nós próprios herdando 4 tipos de nós core
- É possível ganhar velocidade com o LexicalComposer exclusivo para React e o pacote @lexical/react
- Para rodar o Lexical no backend sem DOM, pode-se usar o pacote @lexical/headless
Alterações no lado do servidor
- É possível modificar documentos do Lexical no servidor, e a Liveblocks oferece uma biblioteca que simplifica isso
Vantagens
- Suporta colaboração em tempo real com Yjs
- Independente de framework, com pacote dedicado para React
- Suporte da Liveblocks integrado a comentários, menções e histórico de versões
- Desenvolvimento muito ativo, grande comunidade e apoio da Meta
Desvantagens
- A colaboração em tempo real com Yjs pode apresentar alguns bugs se edge cases não forem tratados manualmente
- Faltam recursos de pure decorations, e funcionalidades avançadas exigem contornos via DOM
- O pacote core é maior que o do Tiptap e do Slate

Slate

Framework de editor personalizável usado por Discord, Grafana, Sanity.io, Slite e outros
A Liveblocks adota o Slate como padrão em seu próprio compositor de comentários
A estrutura de dados é simples, permite controle total e pode ser usada de forma genérica além de React
Extensão do Slate
- É possível estender o Slate por meio de vários exemplos e da documentação
- O ecossistema de plugins é limitado, mas não é tão difícil implementar por conta própria
- Existe um projeto chamado Plate como uma forma mais expandida
Limitações
- Tem um tamanho de bundle um pouco maior que o do Tiptap
- Há poucos recursos nativos, então algumas partes precisam ser implementadas manualmente
Colaboração em tempo real
- É possível implementar colaboração em tempo real em documentos Slate usando slate-yjs, @liveblocks/yjs e outros
Vantagens
- Excelente suporte de documentação
- Suporte a colaboração em tempo real com Yjs
- Independente de framework, com pacote dedicado para React
- Alta extensibilidade
Desvantagens
- Tamanho de bundle ligeiramente maior que o do Tiptap
- Falta de recursos nativos

Quill

Editor com histórico de uso em Slack, LinkedIn, Figma, Zoom, Miro, Airtable e outros
O desenvolvimento ficou mais lento por um tempo, mas voltou a ganhar força com o lançamento da versão 2 em abril de 2024, incluindo uma reescrita em TypeScript
Usa um modelo de documento próprio chamado Parchment, um conceito semelhante ao schema do ProseMirror
Limitações
- Ao contrário do Lexical, não tem recursos de decoração pura, então funções como destaque colorido ou cursores de colaboração exigem sobreposição de elementos DOM separados
- Muitos plugins para Quill 2 ainda não foram atualizados
- A atividade da comunidade pode ser um pouco menor em comparação com outros editores
Colaboração em tempo real
- É possível implementar colaboração em tempo real combinando Yjs com y-quill
- O backend separado pode usar várias abordagens, como Liveblocks
Vantagens
- Excelente suporte de documentação
- Independente de framework, com pacote dedicado para React
- Suporte a colaboração em tempo real com Yjs
- Uso de formato delta simples
Desvantagens
- Faltam recursos nativos e os plugins ainda não foram totalmente atualizados para o Quill 2
- Falta de recursos de decoração pura
- Desenvolvimento relativamente menos ativo e comunidade menor
- Tamanho de bundle duas vezes maior que o do Tiptap ou Slate

ProseMirror

Framework central que serve de base para vários editores, como Tiptap, Remirror e BlockNote
Garante operação estável com uma estrutura clara de schema, state, view, transform e outros
Se a ideia for montar um editor do zero apenas com a biblioteca core, a quantidade de código tende a ser grande
Limitações
- A própria documentação afirma que até para criar um editor simples é necessário bastante código
- Recomenda-se usar wrappers de nível mais alto, como Tiptap, Remirror e BlockNote
- A curva de aprendizado é relativamente alta, mas a documentação e a comunidade são bem organizadas
Vantagens
- Excelente documentação com uma comunidade ativa
- Suporte a colaboração em tempo real com Yjs
Desvantagens
- Exige muito código para implementar exemplos básicos
- Falta de recursos nativos
- Curva de aprendizado relativamente íngreme

Plate

Projeto baseado em Slate, no estilo “baterias incluídas”, que oferece plugins ricos como recursos de IA, menções e comentários
É flexível, pois permite escolher apenas os recursos necessários
Também oferece templates pagos e foi projetado exclusivamente para React
Limitações
- Atualmente, a colaboração só tem suporte oficial via Hocuspocus, e é necessário implementar a integração com outros backends Yjs, como o Liveblocks
- Por ser exclusivo para React, a compatibilidade com outros frameworks pode ser limitada
- Como tem muitos recursos, o tamanho do bundle tende a crescer
Vantagens
- Oferece uma biblioteca variada de plugins
- Suporte a recursos de edição no lado do servidor
- Fornece templates para acelerar o início do projeto
Desvantagens
- Projetado exclusivamente para React
- Os recursos de colaboração só podem ser usados via Hocuspocus
- Tamanho de bundle maior do que o de editores mais básicos

Remirror

Editor baseado em ProseMirror, semelhante ao Tiptap, mas com uma abordagem mais “baterias incluídas”
Suporta mais de 30 plugins, hooks para React, internacionalização (i18n), acessibilidade (a11y) e outros recursos
É open source sob licença MIT e também oferece recursos de colaboração
Limitações
- Tem uma comunidade menor que a do Tiptap e as atualizações podem ser mais lentas
- Há muitos recursos exclusivos para React, o que pode gerar limitações em outros ambientes
- O tamanho do bundle é relativamente grande
Colaboração em tempo real
- O Remirror oferece suporte a colaboração com Yjs e Liveblocks por meio de YjsExtension
Vantagens
- Excelente suporte de documentação
- Oferece uma biblioteca variada de plugins
- Suporte a colaboração com Yjs e Liveblocks
Desvantagens
- Projetado exclusivamente para React
- Bundle maior
- Baixa frequência de atualizações e comunidade menor

Editor.js

Editor de texto rico com suporte a edição por blocos, com vários plugins e uma grande comunidade
Tem uma estrutura de dados composta por blocos, inline e tune
Não depende de framework e já inclui vários recursos convenientes, como tooltips
Limitações
- Não há suporte oficial a colaboração em tempo real, e embora existam alguns PRs com essa proposta, o estado de manutenção é incerto
- Mesmo só com o pacote básico, o tamanho já é relativamente grande
Colaboração em tempo real
- Não é suportada oficialmente
Vantagens
- Oferece uma rica biblioteca de plugins com várias funcionalidades
- Suporte a integrações mantidas pela comunidade com vários CMS e frameworks de backend
Desvantagens
- Bundle maior
- Ausência de colaboração em tempo real

CKEditor

Editor com mais de 20 anos de história, cuja versão atual (5) oferece uma estrutura moderna e recursos ricos
Suporta vários frameworks, como Angular, React, Vue e Next
É distribuído sob licença GPL-2, o que em certas situações exige open source, e para uso comercial é necessário comprar uma licença separada
Limitações
- Muitos plugins são pagos, e os recursos de colaboração também só podem ser usados pelo serviço em nuvem do CKEditor
- A licença GPL-2 e o modelo de cobrança baseado em volume de carregamentos podem ser obstáculos para muitos usuários
Colaboração em tempo real
- Fora o serviço proprietário em nuvem do CKEditor, não há outras soluções de colaboração disponíveis
Vantagens
- Oferece muitos recursos de forma nativa
- Compatível com vários frameworks
Desvantagens
- Os recursos de colaboração dependem do serviço em nuvem do CKEditor
- A licença GPL-2 pode ser uma limitação para alguns usuários
- Alguns recursos são oferecidos com cobrança baseada no uso

TinyMCE

Assim como o CKEditor, é um editor com mais de 20 anos de história e segue a licença GPL-2
Pode ser usado em vários ambientes, como Angular, React e Vue
Existe um serviço de colaboração em nuvem com cobrança baseada no número de carregamentos
Limitações
- Recursos importantes como Markdown, menções, comentários e tipografia avançada são oferecidos como plugins pagos
- Falta documentação sobre como manipular documentos no lado do servidor
Colaboração em tempo real
- Fora a solução proprietária de colaboração do TinyMCE, não há outros métodos divulgados
Vantagens
- Oferece muitos recursos de forma nativa
- Compatível com vários frameworks
Desvantagens
- Os recursos de colaboração dependem do serviço Tiny Cloud
- A licença GPL-2 pode ser uma limitação para alguns usuários
- Alguns recursos são oferecidos com cobrança baseada no uso

Resumo comparativo dos editores

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: não oferece (há exemplos)
- Mentions: pode usar o plugin Suggestion
- Server-side editing: é possível editar documentos no Node.js com prosemirror-state e prosemirror-model
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: disponível sem configuração via integração com Liveblocks, personalizável
- Mentions: disponível sem configuração via integração com Liveblocks, personalizável
- Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: disponível
- Mentions: disponível
- Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: disponível via Liveblocks ou exemplos personalizados
- Mentions: disponível
- Server-side editing: disponível via ProseMirror ou pelo pacote Node.js ProseMirror da Liveblocks
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, outros
- Collaboration: Liveblocks, Yjs
- Comments: disponível sem configuração via integração com Liveblocks, personalizável
- Mentions: disponível sem configuração via integração com Liveblocks, personalizável
- Server-side editing: disponível via Lexical ou pelo pacote Node.js Lexical da Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: não oferece (há exemplos)
- Mentions: há exemplos
- Server-side editing: não oferece
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: exclusivo para React
- Collaboration: Hocuspocus (Yjs)
- Comments: disponível
- Mentions: disponível
- Server-side editing: disponível
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: não oferece (há exemplos)
- Mentions: pode usar bibliotecas de terceiros
- Server-side editing: não oferece
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: não suporta (há exemplos de terceiros)
- Comments: não oferece (há bibliotecas de terceiros)
- Mentions: não oferece (há exemplos)
- Server-side editing: não oferece
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: integração com CKEditor Cloud
- Comments: disponível
- Mentions: disponível
- Server-side editing: disponível
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, outros
- Collaboration: integração com Tiny Cloud
- Comments: integração com Tiny Cloud
- Mentions: disponível
- Server-side editing: não oferece
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 comentários

bingo992000 2025-03-15

Aplicar o QuillJS em um projeto SvelteKit foi bem incômodo. No React, por haver bibliotecas, foi um pouco mais fácil.

firea32 2025-02-17

No fim das contas, o tiptap é o melhor, porque é fácil desenvolver componentes personalizados no React.

vb6ko 2025-02-11

Eu também pesquisei isso recentemente, então obrigado por ter organizado tão bem.

No caso do coreano, alguns editores têm pequenos bugs de entrada no mobile.
Ao digitar <동해물과>, às vezes entra como <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ>
ou, ao digitar <동해물과>, entra como <동동해해물물과과>.
(Referência: https://github.com/ckeditor/ckeditor5/issues/13693)

Eu não uso frameworks como React ou Vue, e como também relutei em comprar uma licença de editor, minhas opções ficaram bem limitadas.

Por isso, além do que foi citado no texto, também analisei os 4 itens abaixo.

https://trix-editor.org/
É um editor feito pela 37signals, liderada pelo DHH do Ruby on Rails. Foi criado em JavaScript puro (ou seja, sem usar React e afins), e também não foi muito difícil de customizar. (como converter automaticamente em embed do YouTube ao colar um link do YouTube)

https://ui.toast.com/tui-editor
É uma ferramenta criada pela NHN Cloud.

https://naver.github.io/smarteditor2/demo/
É o Naver SmartEditor2. É clássico, mas achei que, em serviços voltados para coreanos, poderia acabar sendo uma familiaridade bem aceita.

https://summernote.org/
É o Summernote, desenvolvido por um coreano. Eu escolhi este. Quando você aplica um tema, ele fica bem sofisticado. Também é prático porque já vem com recursos embutidos que fazem sentido na visão de um coreano. (como a conversão em embed do link do YouTube mencionada acima) Mas, como eu queria estilizar com tailwind prose, ele tem estilos de tipografia próprios, então precisei mexer um pouco nisso.

teddy418 2025-02-11

Quero corrigir um ponto da ferramenta número 2: o TUI Editor não é um projeto da Toss, e sim um projeto desenvolvido como open source pela NHN Cloud.

vb6ko 2025-02-12

É isso mesmo, faço a correção (não sei onde fica a edição..).

moderator 2025-02-16

Corrigido para nhncloud.

carnoxen 2025-02-14

Originalmente, este site não tem edição. Só tem como um administrador editar.

carnoxen 2025-02-10

Não está aqui, mas eu gostaria que o Gutenberg do WordPress fosse lançado como uma biblioteca independente.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Está aí, mas em comparação com os que foram apresentados no texto, os casos de uso são claramente bem mais limitados.

carnoxen 2025-02-11

Ah! Então a Automattic estava mantendo isso arquivado com outro nome. Era o meu recurso favorito na época em que a empresa usava WordPress.

winterjung 2025-02-10

O link é do blog da liveblocks.io, mas a URL de preview aparece como (github.com/US-Artificial-Intelligence), né?

xguru 2025-02-10

Ao publicar o texto, houve um problema porque usei exatamente o endereço do post anterior durante a edição. Já corrigi.

tsboard 2025-02-10

Usei o tiptap pela primeira vez em um projeto, e estou usando satisfeito porque, em comparação com outros editores mais tradicionais, a documentação, os recursos e a implementação eram todos muito bons. Foi ótimo poder pegar só o que eu precisava e implementar a UI do meu jeito, mas teve uma parte um pouco pesada: o volume de trabalho para implementar tudo exatamente do jeito que eu queria não foi nada pequeno, rs...!

babadudu 2026-03-30

TinyMCE é bom.