¿Qué framework de editor de texto enriquecido deberías elegir en 2025?

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

El editor de texto enriquecido (WYSIWYG), hoy esencial en las apps, se usa de forma generalizada en servicios como Linear, Notion y Google Docs Liveblocks analizó durante el último año varios editores populares y organizó sus fortalezas y debilidades En general, los editores se dividen en dos tipos: “core” y “battery-included” Si solo necesitas un editor simple, conviene una opción liviana; si quieres crear un editor complejo con muchas funciones colaborativas, vale la pena considerar uno con alta extensibilidad En términos generales, la opción más equilibrada es Tiptap, evaluado como un balance entre abundancia de funciones y un nivel de opinión no excesivo Colaboración Nosotros (Liveblocks) nos hemos enfocado en funciones de colaboración, y en la mayoría de los editores es posible implementar colaboración en tiempo real mediante la biblioteca CRDT llamada Yjs Al usar Yjs, se necesita un servicio backend que almacene los documentos y mantenga la conexión en tiempo real Liveblocks ofrece un backend general de Yjs que puede usarse con varios editores compatibles con Yjs, además de soluciones integradas para Tiptap y Lexical Algunos editores usan soluciones propias basadas en OT (Operational Transform) o servicios cloud de código cerrado Advertencias antes de empezar Se excluyen editores sin mantenimiento como Draft.js, editores con comunidades pequeñas o editores de código privado (como Froala) La accesibilidad (a11y) requiere cierto trabajo en la mayoría de los editores, por lo que conviene consultar la documentación de cada uno Tiptap Es un editor que funciona sobre ProseMirror y mejora la experiencia de desarrollo al abstraer la complejidad de ProseMirror En su mayoría se ofrece bajo licencia MIT, y permite usar de inmediato funciones de colaboración en tiempo real con Tiptap Cloud o Liveblocks Tiene muchas funciones, pero está construido con una estructura compatible con tree-shaking, por lo que el tamaño del bundle core puede mantenerse por debajo del de Quill, Slate y Lexical Extensión Tiptap está diseñado para facilitar la adición de nodos, marcas, comandos y extensiones simples Si es necesario, se puede sobrescribir el comportamiento de extensiones existentes para personalizarlo como se quiera Algunas extensiones “pro” se ofrecen como funciones de pago Personalización avanzada Puede surgir la necesidad de trabajar directamente con la estructura de ProseMirror Lleva algo de tiempo familiarizarse con abstracciones propias de Tiptap, como la command chain Su modelo de datos está basado en schema; en la mayoría de los casos se genera automáticamente, pero para funciones avanzadas puede ser necesario manipular el schema directamente Limitaciones (Drawbacks) Puede resultar confuso tener que consultar alternadamente la documentación de ProseMirror y la de Tiptap El contenido relacionado con accesibilidad (a11y) depende en gran medida de quien lo implemente Si durante una transacción se recorre innecesariamente el estado del documento, puede haber degradación de rendimiento Cambios del lado del servidor Tiptap por sí solo no facilita demasiado la manipulación de documentos del lado del servidor Hay que considerar usar ProseMirror directamente o modificar los documentos JSON de forma manual Liveblocks ofrece una biblioteca que facilita un poco más la modificación de documentos ProseMirror Colaboración en tiempo real Tiptap cuenta con una extensión que ofrece colaboración en tiempo real con Yjs Puede integrarse con varias soluciones cloud como Tiptap Cloud y Liveblocks Liveblocks Text Editor ofrece además cursores, comentarios, menciones, historial de versiones y otras funciones, además de la colaboración en tiempo real Ventajas (Pros) Excelente documentación Muy buenas funciones de colaboración en tiempo real Independiente del framework, con paquete específico para React Alta extensibilidad Posibilidad de integración con Liveblocks o Tiptap Cloud Desventajas (Cons) Puede haber degradación de rendimiento si no se siguen las mejores prácticas de uso Para desarrollar funciones avanzadas hay que aprender la estructura interna de ProseMirror Por defecto carece de suficientes capacidades de edición headless del lado del servidor BlockNote BlockNote es un editor basado en bloques que extiende Tiptap y ProseMirror, y ofrece funciones al estilo de Notion Está desarrollado principalmente sobre React, por lo que resulta difícil aprovechar sus componentes de UI en otros frameworks Incluye de entrada funciones necesarias como menú slash y toolbar flotante, lo que permite usarlo de forma sencilla Limitaciones Aunque BlockNote en sí es open source, algunas funciones como los exportadores a docx y PDF requieren una suscripción de pago Colaboración en tiempo real Soporta funciones colaborativas basadas en Yjs y Liveblocks Próximamente ofrecerá integración oficial con Liveblocks Ventajas Basado en Tiptap y ProseMirror, cuya estabilidad ya está probada Ofrece colaboración en tiempo real con Yjs y Liveblocks Incluye de forma nativa una API de edición basada en bloques y componentes de UI Desventajas Diseñado principalmente para React El tamaño del bundle es mayor que el de editores más básicos Lexical Es un editor respaldado por Facebook (Meta) que está recibiendo mucha atención Tras varios meses desarrollando extensiones en Liveblocks para comentarios, menciones, historial de versiones y colaboración en tiempo real, la impresión es que aún está en una etapa temprana Actualmente está por debajo de la versión 1.0 y sigue actualizándose con rapidez Limitaciones No cuenta con la función de “pure decorations”, por lo que para implementar funciones como la visualización de cursores hay que superponer elementos del DOM sobre el editor Su soporte básico de colaboración con Yjs todavía es frágil frente a edge cases Existe un problema por el cual el nombre del nodo raíz está hardcodeado, lo que dificulta usar varios editores a la vez dentro de un mismo documento Colaboración en tiempo real A menos que se use el paquete de Liveblocks, implementar colaboración en Lexical tiene un nivel de dificultad alto En ejemplos como StickyNotes, se evita el problema creando múltiples nodos raíz y usando para cada uno un documento y una conexión de socket separados Como el desarrollo avanza rápido, los problemas se van resolviendo de forma constante Extensión de Lexical Lexical administra los datos mediante una jerarquía de nodos Se pueden crear nodos propios heredando de 4 tipos de nodos core Se puede acelerar el desarrollo mediante LexicalComposer y el paquete @lexical/react, ambos específicos para React Para ejecutar Lexical en el backend sin DOM, se puede usar el paquete @lexical/headless Cambios del lado del servidor Es posible modificar documentos de Lexical en el servidor, y Liveblocks ofrece una biblioteca que simplifica esto Ventajas Soporta colaboración en tiempo real usando Yjs Independiente del framework, con paquete específico para React Soporte de Liveblocks integrado con comentarios, menciones e historial de versiones Desarrollo muy activo y comunidad grande, respaldados por Meta Desventajas La colaboración en tiempo real con Yjs puede presentar algunos bugs si no se manejan manualmente ciertos edge cases Carece de funciones de pure decorations y requiere workarounds con el DOM para funciones avanzadas El tamaño del paquete core es mayor que el de Tiptap y Slate Slate Framework de editor personalizable usado en Discord, Grafana, Sanity.io, Slite y otros Liveblocks adoptó Slate como opción predeterminada para su propio compositor de comentarios Su estructura de datos es simple, permite control total y puede usarse de forma general además de React Extensión de Slate Es posible extender Slate mediante varios ejemplos y documentación El ecosistema de plugins es limitado, pero implementarlo por cuenta propia no es especialmente difícil Existe un proyecto llamado Plate como forma más extendida Limitaciones Tiene un tamaño de bundle un poco mayor que Tiptap Incluye pocas funciones integradas, por lo que hay partes que deben implementarse manualmente Colaboración en tiempo real Es posible implementar colaboración en tiempo real en documentos de Slate usando slate-yjs, @liveblocks/yjs, etc. Ventajas Excelente soporte de documentación Soporte para colaboración en tiempo real con Yjs Independiente del framework y con paquete dedicado para React Alta extensibilidad Desventajas Tamaño de bundle ligeramente mayor que Tiptap Falta de funciones incluidas por defecto Quill Editor con historial de uso en Slack, LinkedIn, Figma, Zoom, Miro, Airtable y otros Su desarrollo estuvo algo estancado por un tiempo, pero volvió a activarse tras lanzar la versión 2 en abril de 2024, incluyendo una reescritura en TypeScript Usa un modelo de documentos propio llamado Parchment, un concepto similar al esquema de ProseMirror Limitaciones No tiene una función de decoración pura como Lexical, por lo que para funciones como resaltado de color o cursores de colaboración hay que superponer elementos DOM por separado Muchos plugins para Quill 2 aún no se han actualizado La actividad de la comunidad puede ser algo menor que la de otros editores Colaboración en tiempo real Se puede implementar colaboración en tiempo real combinando Yjs con y-quill Como backend independiente, pueden usarse varios enfoques como Liveblocks Ventajas Excelente soporte de documentación Independiente del framework y con paquete dedicado para React Soporte para colaboración en tiempo real con Yjs Uso de un formato Delta simple Desventajas Faltan funciones incluidas por defecto y muchos plugins aún no están actualizados para Quill 2 Falta de funciones de decoración pura Desarrollo relativamente menos activo y comunidad más pequeña Tamaño de bundle dos veces mayor que Tiptap o Slate ProseMirror Framework central que sirve de base para varios editores como Tiptap, Remirror y BlockNote Garantiza un funcionamiento estable con una estructura clara de schema, state, view y transform Si se construye un editor desde cero usando solo la librería core, la cantidad de código suele ser considerable Limitaciones La documentación deja claro que incluso para crear un editor simple se necesita bastante código Se recomienda usar wrappers de nivel superior como Tiptap, Remirror o BlockNote La curva de aprendizaje es algo alta, pero la documentación y la comunidad están bien organizadas Ventajas Ofrece excelente documentación junto con una comunidad activa Soporte para colaboración en tiempo real con Yjs Desventajas Se necesita mucho código para implementar ejemplos básicos Falta de funciones incluidas por defecto Curva de aprendizaje relativamente pronunciada Plate Proyecto basado en Slate que ofrece plugins completos como funciones de IA, menciones y comentarios, con un enfoque de “baterías incluidas” Es flexible porque permite elegir solo las funciones necesarias También ofrece plantillas de pago y está diseñado exclusivamente para React Limitaciones La colaboración actualmente solo es compatible oficialmente con Hocuspocus, y se requiere implementación adicional para conectarlo con otros backends de Yjs (por ejemplo, Liveblocks) Al ser exclusivo para React, la compatibilidad con otros frameworks puede ser limitada Al tener muchas funciones, el tamaño del bundle tiende a crecer Ventajas Ofrece una biblioteca variada de plugins Soporte para edición del lado del servidor Incluye plantillas para ayudar a comenzar rápidamente Desventajas Diseñado exclusivamente para React La colaboración solo puede usarse a través de Hocuspocus Tamaño de bundle mayor que el de editores más básicos Remirror Editor basado en ProseMirror, similar a Tiptap pero orientado a un enfoque más de baterías incluidas Soporta más de 30 plugins, hooks de React, internacionalización (i18n), accesibilidad (a11y) y más Es open source bajo licencia MIT y también ofrece funciones de colaboración Limitaciones Su comunidad es más pequeña que la de Tiptap y las actualizaciones pueden ser más lentas Tiene muchas funciones exclusivas para React, lo que puede traer limitaciones en otros entornos El tamaño del bundle es algo grande Colaboración en tiempo real Remirror soporta colaboración con Yjs y Liveblocks mediante YjsExtension Ventajas Excelente soporte de documentación Ofrece una biblioteca variada de plugins Soporte para funciones de colaboración usando Yjs y Liveblocks Desventajas Diseñado exclusivamente para React Mayor tamaño de bundle Baja frecuencia de actualizaciones y comunidad pequeña Editor.js Editor de texto enriquecido con soporte para edición por bloques, con una amplia variedad de plugins y una gran comunidad Tiene una estructura de datos compuesta por bloques, inline y tune No depende de un framework e incluye varias funciones prácticas como tooltips Limitaciones No tiene soporte oficial para colaboración en tiempo real, y aunque hubo algunos PR con intentos en esa dirección, su estado de mantenimiento es incierto Incluso solo con el paquete base, su tamaño ya es relativamente grande Colaboración en tiempo real No cuenta con soporte oficial Ventajas Ofrece una rica biblioteca de plugins con diversas funciones Soporte para integraciones impulsadas por la comunidad con varios CMS y frameworks backend Desventajas Mayor tamaño de bundle Ausencia de colaboración en tiempo real CKEditor Editor con más de 20 años de historia; su versión actual (5) ofrece una estructura moderna y funciones abundantes Soporta varios frameworks como Angular, React, Vue y Next Se distribuye bajo licencia GPL-2, lo que en ciertos casos exige open source y para uso comercial requiere comprar una licencia aparte Limitaciones Una parte importante de los plugins es de pago, y las funciones de colaboración solo pueden usarse con el servicio cloud de CKEditor La licencia GPL-2 y el esquema de cobro basado en cargas pueden ser una barrera para muchos usuarios Colaboración en tiempo real No ofrece otras soluciones de colaboración aparte del servicio cloud propietario de CKEditor Ventajas Ofrece muchísimas funciones de forma predeterminada Compatible con varios frameworks Desventajas Las funciones de colaboración dependen del servicio cloud de CKEditor La licencia GPL-2 puede ser una limitación para algunos usuarios Algunas funciones se ofrecen con precios basados en uso TinyMCE Al igual que CKEditor, es un editor con más de 20 años de historia y sigue la licencia GPL-2 Puede usarse en varios entornos como Angular, React y Vue Existe un servicio cloud de colaboración con cobro basado en número de cargas Limitaciones Funciones importantes como Markdown, menciones, comentarios y tipografía avanzada se ofrecen como plugins de pago Falta documentación sobre cómo manipular documentos del lado del servidor Colaboración en tiempo real No se ha hecho público otro método aparte de la solución propietaria de colaboración de TinyMCE Ventajas Ofrece muchísimas funciones de forma predeterminada Compatible con varios frameworks Desventajas Las funciones de colaboración dependen del servicio Tiny Cloud La licencia GPL-2 puede ser una limitación para algunos usuarios Algunas funciones se ofrecen con precios basados en uso Resumen comparativo de editores ProseMirror Framework: Vanilla Collaboration: Yjs Comments: No lo ofrece (hay ejemplos) Mentions: Se puede usar el plugin Suggestion Server-side editing: Se pueden modificar documentos en Node.js con prosemirror-state y prosemirror-model License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Posibles sin configuración mediante integración con Liveblocks, personalizables Mentions: Posibles sin configuración mediante integración con Liveblocks, personalizables Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: Sí Mentions: Sí Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Posibles mediante Liveblocks o ejemplos personalizados Mentions: Sí Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, otros Collaboration: Liveblocks, Yjs Comments: Posibles sin configuración al integrarlo con Liveblocks, personalizables Mentions: Posibles sin configuración al integrarlo con Liveblocks, personalizables Server-side editing: Posible mediante Lexical o el paquete Node.js Lexical de Liveblocks License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: No lo ofrece (hay ejemplos) Mentions: Hay ejemplos Server-side editing: No lo ofrece License: MIT GitHub Stars: ⭐ 30k Plate Framework: Solo React Collaboration: Hocuspocus (Yjs) Comments: Sí Mentions: Sí Server-side editing: Sí License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: No lo ofrece (hay ejemplos) Mentions: Se pueden usar librerías de terceros Server-side editing: No lo ofrece License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: No compatible (hay ejemplos de terceros) Comments: No lo ofrece (hay librerías de terceros) Mentions: No lo ofrece (hay ejemplos) Server-side editing: No lo ofrece License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: Integración con CKEditor Cloud Comments: Sí Mentions: Sí Server-side editing: Sí License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, otros Collaboration: Integración con Tiny Cloud Comments: Integración con Tiny Cloud Mentions: Sí Server-side editing: No lo ofrece License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 puntos por xguru 2025-02-10 | 14 comentarios | Compartir por WhatsApp

El editor de texto enriquecido (WYSIWYG), hoy esencial en las apps, se usa de forma generalizada en servicios como Linear, Notion y Google Docs
Liveblocks analizó durante el último año varios editores populares y organizó sus fortalezas y debilidades
En general, los editores se dividen en dos tipos: “core” y “battery-included”
Si solo necesitas un editor simple, conviene una opción liviana; si quieres crear un editor complejo con muchas funciones colaborativas, vale la pena considerar uno con alta extensibilidad
En términos generales, la opción más equilibrada es Tiptap, evaluado como un balance entre abundancia de funciones y un nivel de opinión no excesivo
Colaboración
- Nosotros (Liveblocks) nos hemos enfocado en funciones de colaboración, y en la mayoría de los editores es posible implementar colaboración en tiempo real mediante la biblioteca CRDT llamada Yjs
- Al usar Yjs, se necesita un servicio backend que almacene los documentos y mantenga la conexión en tiempo real
- Liveblocks ofrece un backend general de Yjs que puede usarse con varios editores compatibles con Yjs, además de soluciones integradas para Tiptap y Lexical
- Algunos editores usan soluciones propias basadas en OT (Operational Transform) o servicios cloud de código cerrado
Advertencias antes de empezar
- Se excluyen editores sin mantenimiento como Draft.js, editores con comunidades pequeñas o editores de código privado (como Froala)
- La accesibilidad (a11y) requiere cierto trabajo en la mayoría de los editores, por lo que conviene consultar la documentación de cada uno

Tiptap

Es un editor que funciona sobre ProseMirror y mejora la experiencia de desarrollo al abstraer la complejidad de ProseMirror
En su mayoría se ofrece bajo licencia MIT, y permite usar de inmediato funciones de colaboración en tiempo real con Tiptap Cloud o Liveblocks
Tiene muchas funciones, pero está construido con una estructura compatible con tree-shaking, por lo que el tamaño del bundle core puede mantenerse por debajo del de Quill, Slate y Lexical
Extensión
- Tiptap está diseñado para facilitar la adición de nodos, marcas, comandos y extensiones simples
- Si es necesario, se puede sobrescribir el comportamiento de extensiones existentes para personalizarlo como se quiera
- Algunas extensiones “pro” se ofrecen como funciones de pago
Personalización avanzada
- Puede surgir la necesidad de trabajar directamente con la estructura de ProseMirror
- Lleva algo de tiempo familiarizarse con abstracciones propias de Tiptap, como la command chain
- Su modelo de datos está basado en schema; en la mayoría de los casos se genera automáticamente, pero para funciones avanzadas puede ser necesario manipular el schema directamente
Limitaciones (Drawbacks)
- Puede resultar confuso tener que consultar alternadamente la documentación de ProseMirror y la de Tiptap
- El contenido relacionado con accesibilidad (a11y) depende en gran medida de quien lo implemente
- Si durante una transacción se recorre innecesariamente el estado del documento, puede haber degradación de rendimiento
Cambios del lado del servidor
- Tiptap por sí solo no facilita demasiado la manipulación de documentos del lado del servidor
- Hay que considerar usar ProseMirror directamente o modificar los documentos JSON de forma manual
- Liveblocks ofrece una biblioteca que facilita un poco más la modificación de documentos ProseMirror
Colaboración en tiempo real
- Tiptap cuenta con una extensión que ofrece colaboración en tiempo real con Yjs
- Puede integrarse con varias soluciones cloud como Tiptap Cloud y Liveblocks
- Liveblocks Text Editor ofrece además cursores, comentarios, menciones, historial de versiones y otras funciones, además de la colaboración en tiempo real
Ventajas (Pros)
- Excelente documentación
- Muy buenas funciones de colaboración en tiempo real
- Independiente del framework, con paquete específico para React
- Alta extensibilidad
- Posibilidad de integración con Liveblocks o Tiptap Cloud
Desventajas (Cons)
- Puede haber degradación de rendimiento si no se siguen las mejores prácticas de uso
- Para desarrollar funciones avanzadas hay que aprender la estructura interna de ProseMirror
- Por defecto carece de suficientes capacidades de edición headless del lado del servidor

BlockNote

BlockNote es un editor basado en bloques que extiende Tiptap y ProseMirror, y ofrece funciones al estilo de Notion
Está desarrollado principalmente sobre React, por lo que resulta difícil aprovechar sus componentes de UI en otros frameworks
Incluye de entrada funciones necesarias como menú slash y toolbar flotante, lo que permite usarlo de forma sencilla
Limitaciones
- Aunque BlockNote en sí es open source, algunas funciones como los exportadores a docx y PDF requieren una suscripción de pago
Colaboración en tiempo real
- Soporta funciones colaborativas basadas en Yjs y Liveblocks
- Próximamente ofrecerá integración oficial con Liveblocks
Ventajas
- Basado en Tiptap y ProseMirror, cuya estabilidad ya está probada
- Ofrece colaboración en tiempo real con Yjs y Liveblocks
- Incluye de forma nativa una API de edición basada en bloques y componentes de UI
Desventajas
- Diseñado principalmente para React
- El tamaño del bundle es mayor que el de editores más básicos

Lexical

Es un editor respaldado por Facebook (Meta) que está recibiendo mucha atención
Tras varios meses desarrollando extensiones en Liveblocks para comentarios, menciones, historial de versiones y colaboración en tiempo real, la impresión es que aún está en una etapa temprana
Actualmente está por debajo de la versión 1.0 y sigue actualizándose con rapidez
Limitaciones
- No cuenta con la función de “pure decorations”, por lo que para implementar funciones como la visualización de cursores hay que superponer elementos del DOM sobre el editor
- Su soporte básico de colaboración con Yjs todavía es frágil frente a edge cases
- Existe un problema por el cual el nombre del nodo raíz está hardcodeado, lo que dificulta usar varios editores a la vez dentro de un mismo documento
Colaboración en tiempo real
- A menos que se use el paquete de Liveblocks, implementar colaboración en Lexical tiene un nivel de dificultad alto
- En ejemplos como StickyNotes, se evita el problema creando múltiples nodos raíz y usando para cada uno un documento y una conexión de socket separados
- Como el desarrollo avanza rápido, los problemas se van resolviendo de forma constante
Extensión de Lexical
- Lexical administra los datos mediante una jerarquía de nodos
- Se pueden crear nodos propios heredando de 4 tipos de nodos core
- Se puede acelerar el desarrollo mediante LexicalComposer y el paquete @lexical/react, ambos específicos para React
- Para ejecutar Lexical en el backend sin DOM, se puede usar el paquete @lexical/headless
Cambios del lado del servidor
- Es posible modificar documentos de Lexical en el servidor, y Liveblocks ofrece una biblioteca que simplifica esto
Ventajas
- Soporta colaboración en tiempo real usando Yjs
- Independiente del framework, con paquete específico para React
- Soporte de Liveblocks integrado con comentarios, menciones e historial de versiones
- Desarrollo muy activo y comunidad grande, respaldados por Meta
Desventajas
- La colaboración en tiempo real con Yjs puede presentar algunos bugs si no se manejan manualmente ciertos edge cases
- Carece de funciones de pure decorations y requiere workarounds con el DOM para funciones avanzadas
- El tamaño del paquete core es mayor que el de Tiptap y Slate

Slate

Framework de editor personalizable usado en Discord, Grafana, Sanity.io, Slite y otros
Liveblocks adoptó Slate como opción predeterminada para su propio compositor de comentarios
Su estructura de datos es simple, permite control total y puede usarse de forma general además de React
Extensión de Slate
- Es posible extender Slate mediante varios ejemplos y documentación
- El ecosistema de plugins es limitado, pero implementarlo por cuenta propia no es especialmente difícil
- Existe un proyecto llamado Plate como forma más extendida
Limitaciones
- Tiene un tamaño de bundle un poco mayor que Tiptap
- Incluye pocas funciones integradas, por lo que hay partes que deben implementarse manualmente
Colaboración en tiempo real
- Es posible implementar colaboración en tiempo real en documentos de Slate usando slate-yjs, @liveblocks/yjs, etc.
Ventajas
- Excelente soporte de documentación
- Soporte para colaboración en tiempo real con Yjs
- Independiente del framework y con paquete dedicado para React
- Alta extensibilidad
Desventajas
- Tamaño de bundle ligeramente mayor que Tiptap
- Falta de funciones incluidas por defecto

Quill

Editor con historial de uso en Slack, LinkedIn, Figma, Zoom, Miro, Airtable y otros
Su desarrollo estuvo algo estancado por un tiempo, pero volvió a activarse tras lanzar la versión 2 en abril de 2024, incluyendo una reescritura en TypeScript
Usa un modelo de documentos propio llamado Parchment, un concepto similar al esquema de ProseMirror
Limitaciones
- No tiene una función de decoración pura como Lexical, por lo que para funciones como resaltado de color o cursores de colaboración hay que superponer elementos DOM por separado
- Muchos plugins para Quill 2 aún no se han actualizado
- La actividad de la comunidad puede ser algo menor que la de otros editores
Colaboración en tiempo real
- Se puede implementar colaboración en tiempo real combinando Yjs con y-quill
- Como backend independiente, pueden usarse varios enfoques como Liveblocks
Ventajas
- Excelente soporte de documentación
- Independiente del framework y con paquete dedicado para React
- Soporte para colaboración en tiempo real con Yjs
- Uso de un formato Delta simple
Desventajas
- Faltan funciones incluidas por defecto y muchos plugins aún no están actualizados para Quill 2
- Falta de funciones de decoración pura
- Desarrollo relativamente menos activo y comunidad más pequeña
- Tamaño de bundle dos veces mayor que Tiptap o Slate

ProseMirror

Framework central que sirve de base para varios editores como Tiptap, Remirror y BlockNote
Garantiza un funcionamiento estable con una estructura clara de schema, state, view y transform
Si se construye un editor desde cero usando solo la librería core, la cantidad de código suele ser considerable
Limitaciones
- La documentación deja claro que incluso para crear un editor simple se necesita bastante código
- Se recomienda usar wrappers de nivel superior como Tiptap, Remirror o BlockNote
- La curva de aprendizaje es algo alta, pero la documentación y la comunidad están bien organizadas
Ventajas
- Ofrece excelente documentación junto con una comunidad activa
- Soporte para colaboración en tiempo real con Yjs
Desventajas
- Se necesita mucho código para implementar ejemplos básicos
- Falta de funciones incluidas por defecto
- Curva de aprendizaje relativamente pronunciada

Plate

Proyecto basado en Slate que ofrece plugins completos como funciones de IA, menciones y comentarios, con un enfoque de “baterías incluidas”
Es flexible porque permite elegir solo las funciones necesarias
También ofrece plantillas de pago y está diseñado exclusivamente para React
Limitaciones
- La colaboración actualmente solo es compatible oficialmente con Hocuspocus, y se requiere implementación adicional para conectarlo con otros backends de Yjs (por ejemplo, Liveblocks)
- Al ser exclusivo para React, la compatibilidad con otros frameworks puede ser limitada
- Al tener muchas funciones, el tamaño del bundle tiende a crecer
Ventajas
- Ofrece una biblioteca variada de plugins
- Soporte para edición del lado del servidor
- Incluye plantillas para ayudar a comenzar rápidamente
Desventajas
- Diseñado exclusivamente para React
- La colaboración solo puede usarse a través de Hocuspocus
- Tamaño de bundle mayor que el de editores más básicos

Remirror

Editor basado en ProseMirror, similar a Tiptap pero orientado a un enfoque más de baterías incluidas
Soporta más de 30 plugins, hooks de React, internacionalización (i18n), accesibilidad (a11y) y más
Es open source bajo licencia MIT y también ofrece funciones de colaboración
Limitaciones
- Su comunidad es más pequeña que la de Tiptap y las actualizaciones pueden ser más lentas
- Tiene muchas funciones exclusivas para React, lo que puede traer limitaciones en otros entornos
- El tamaño del bundle es algo grande
Colaboración en tiempo real
- Remirror soporta colaboración con Yjs y Liveblocks mediante YjsExtension
Ventajas
- Excelente soporte de documentación
- Ofrece una biblioteca variada de plugins
- Soporte para funciones de colaboración usando Yjs y Liveblocks
Desventajas
- Diseñado exclusivamente para React
- Mayor tamaño de bundle
- Baja frecuencia de actualizaciones y comunidad pequeña

Editor.js

Editor de texto enriquecido con soporte para edición por bloques, con una amplia variedad de plugins y una gran comunidad
Tiene una estructura de datos compuesta por bloques, inline y tune
No depende de un framework e incluye varias funciones prácticas como tooltips
Limitaciones
- No tiene soporte oficial para colaboración en tiempo real, y aunque hubo algunos PR con intentos en esa dirección, su estado de mantenimiento es incierto
- Incluso solo con el paquete base, su tamaño ya es relativamente grande
Colaboración en tiempo real
- No cuenta con soporte oficial
Ventajas
- Ofrece una rica biblioteca de plugins con diversas funciones
- Soporte para integraciones impulsadas por la comunidad con varios CMS y frameworks backend
Desventajas
- Mayor tamaño de bundle
- Ausencia de colaboración en tiempo real

CKEditor

Editor con más de 20 años de historia; su versión actual (5) ofrece una estructura moderna y funciones abundantes
Soporta varios frameworks como Angular, React, Vue y Next
Se distribuye bajo licencia GPL-2, lo que en ciertos casos exige open source y para uso comercial requiere comprar una licencia aparte
Limitaciones
- Una parte importante de los plugins es de pago, y las funciones de colaboración solo pueden usarse con el servicio cloud de CKEditor
- La licencia GPL-2 y el esquema de cobro basado en cargas pueden ser una barrera para muchos usuarios
Colaboración en tiempo real
- No ofrece otras soluciones de colaboración aparte del servicio cloud propietario de CKEditor
Ventajas
- Ofrece muchísimas funciones de forma predeterminada
- Compatible con varios frameworks
Desventajas
- Las funciones de colaboración dependen del servicio cloud de CKEditor
- La licencia GPL-2 puede ser una limitación para algunos usuarios
- Algunas funciones se ofrecen con precios basados en uso

TinyMCE

Al igual que CKEditor, es un editor con más de 20 años de historia y sigue la licencia GPL-2
Puede usarse en varios entornos como Angular, React y Vue
Existe un servicio cloud de colaboración con cobro basado en número de cargas
Limitaciones
- Funciones importantes como Markdown, menciones, comentarios y tipografía avanzada se ofrecen como plugins de pago
- Falta documentación sobre cómo manipular documentos del lado del servidor
Colaboración en tiempo real
- No se ha hecho público otro método aparte de la solución propietaria de colaboración de TinyMCE
Ventajas
- Ofrece muchísimas funciones de forma predeterminada
- Compatible con varios frameworks
Desventajas
- Las funciones de colaboración dependen del servicio Tiny Cloud
- La licencia GPL-2 puede ser una limitación para algunos usuarios
- Algunas funciones se ofrecen con precios basados en uso

Resumen comparativo de editores

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: No lo ofrece (hay ejemplos)
- Mentions: Se puede usar el plugin Suggestion
- Server-side editing: Se pueden modificar documentos en Node.js con prosemirror-state y prosemirror-model
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Posibles sin configuración mediante integración con Liveblocks, personalizables
- Mentions: Posibles sin configuración mediante integración con Liveblocks, personalizables
- Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: Sí
- Mentions: Sí
- Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Posibles mediante Liveblocks o ejemplos personalizados
- Mentions: Sí
- Server-side editing: Posible mediante ProseMirror o el paquete Node.js ProseMirror de Liveblocks
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, otros
- Collaboration: Liveblocks, Yjs
- Comments: Posibles sin configuración al integrarlo con Liveblocks, personalizables
- Mentions: Posibles sin configuración al integrarlo con Liveblocks, personalizables
- Server-side editing: Posible mediante Lexical o el paquete Node.js Lexical de Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: No lo ofrece (hay ejemplos)
- Mentions: Hay ejemplos
- Server-side editing: No lo ofrece
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: Solo React
- Collaboration: Hocuspocus (Yjs)
- Comments: Sí
- Mentions: Sí
- Server-side editing: Sí
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: No lo ofrece (hay ejemplos)
- Mentions: Se pueden usar librerías de terceros
- Server-side editing: No lo ofrece
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: No compatible (hay ejemplos de terceros)
- Comments: No lo ofrece (hay librerías de terceros)
- Mentions: No lo ofrece (hay ejemplos)
- Server-side editing: No lo ofrece
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: Integración con CKEditor Cloud
- Comments: Sí
- Mentions: Sí
- Server-side editing: Sí
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, otros
- Collaboration: Integración con Tiny Cloud
- Comments: Integración con Tiny Cloud
- Mentions: Sí
- Server-side editing: No lo ofrece
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 comentarios

bingo992000 2025-03-15

Aplicar QuillJS en un proyecto de SvelteKit fue bastante incómodo. En React fue un poco más fácil porque al menos había una librería.

firea32 2025-02-17

Al final, tiptap, que facilita el desarrollo de componentes personalizados en React, resultó ser la mejor opción.

vb6ko 2025-02-11

Yo también estuve investigándolo hace poco, así que gracias por resumirlo tan bien.

En el caso del coreano, algunos editores tienen pequeños bugs de entrada en móvil.
Al escribir <동해물과>, se ingresa como <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ>
o al escribir <동해물과>, se ingresa como <동동해해물물과과>.
(Referencia: https://github.com/ckeditor/ckeditor5/issues/13693)

Yo no uso frameworks como React o Vue, y además me incomodaba tener que comprar una licencia de editor, así que mis opciones eran muy limitadas.

Por eso, además de los que aparecen en el artículo, revisé estas otras 4 opciones.

https://trix-editor.org/
Es un editor hecho por 37signals, liderada por DHH de Ruby on Rails. Está hecho en JavaScript puro (es decir, sin usar React ni similares) y tampoco fue tan difícil personalizarlo. (Por ejemplo, convertir automáticamente un enlace de YouTube pegado en un embed de YouTube).

https://ui.toast.com/tui-editor
Es una herramienta creada por NHN Cloud.

https://naver.github.io/smarteditor2/demo/
Es Naver SmartEditor2. Es clásico, pero me pareció que para servicios dirigidos a coreanos podría resultar una familiaridad muy apreciada.

https://summernote.org/
Es Summernote, desarrollado por un coreano. Yo elegí este. Si le aplicas un tema, se ve bastante elegante. Además, trae integradas funciones que suelen valorar los coreanos, así que resulta cómodo. (Como la conversión del enlace de YouTube en embed mencionada arriba). Eso sí, quise estilizarlo con tailwind prose, pero como trae sus propios estilos de tipografía, tuve que meterle algo de mano.

teddy418 2025-02-11

Hay algo que me gustaría corregir sobre la herramienta número 2: TUI Editor no es un proyecto de Toss, sino un proyecto de código abierto desarrollado por NHN Cloud.

vb6ko 2025-02-12

Sí, tiene razón. Lo corrijo (no sé dónde está la opción para editarlo..).

moderator 2025-02-16

Lo cambié a nhncloud.

carnoxen 2025-02-14

En este sitio no hay ediciones. La única opción es que lo modifique un administrador.

carnoxen 2025-02-10

No está aquí, pero me gustaría que WordPress Gutenberg saliera como una biblioteca independiente.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Aunque sí aparece, en comparación con los que se presentan en el artículo, sus casos de uso son notablemente menores.

carnoxen 2025-02-11

¡Oh! Así que Automattic lo había archivado con otro nombre. Era mi función favorita cuando usábamos WordPress en la empresa.

winterjung 2025-02-10

El enlace es del blog de liveblocks.io, pero la URL de vista previa aparece como (github.com/US-Artificial-Intelligence), ¿no?

xguru 2025-02-10

Mientras publicaba la entrada, hubo un problema porque usé tal cual la URL de la publicación anterior y luego la edité. Ya lo corregí.

tsboard 2025-02-10

Lo probé aplicando tiptap por primera vez en un proyecto y, en comparación con otros editores tradicionales, la documentación, las funciones y la implementación me parecieron muy buenas, así que lo estoy usando con satisfacción. Me gustó poder tomar solo lo necesario e implementar la UI a mi gusto, pero una parte que sí se me hizo pesada fue que la cantidad de trabajo para dejarlo exactamente a mi gusto no era nada pequeña... ¡qué brutal!

babadudu 2026-03-30

TinyMCE es bueno.