Welches Rich-Text-Editor-Framework sollte man 2025 wählen?

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

Rich-Text-Editoren (WYSIWYG), die heute in Apps unverzichtbar sind, werden in Diensten wie Linear, Notion und Google Docs allgemein eingesetzt Liveblocks hat im vergangenen Jahr verschiedene beliebte Editoren analysiert und ihre Vor- und Nachteile zusammengefasst Editoren lassen sich grob in zwei Kategorien einteilen: „Core-orientiert“ und „Battery-included“ Wenn man nur einen einfachen Editor braucht, sollte man eine leichtgewichtige Option wählen; wenn man einen komplexen Editor mit vielen Kollaborationsfunktionen bauen will, sollte man auf hohe Erweiterbarkeit achten Insgesamt gilt Tiptap als die naheliegendste Wahl, da es als funktionsreich bewertet wird, ohne zu stark bevormundend zu sein, und eine gute Balance bietet Kollaboration Wir (Liveblocks) haben uns auf Kollaborationsfunktionen konzentriert, und bei den meisten Editoren lässt sich Echtzeit-Kollaboration über die CRDT-Bibliothek Yjs umsetzen Für Yjs braucht man einen Backend-Dienst, der Dokumente speichert und die Echtzeitverbindung aufrechterhält Liveblocks bietet ein allgemeines Yjs-Backend, das mit mehreren Editoren mit Yjs-Unterstützung verwendet werden kann, sowie integrierte Lösungen für Tiptap und Lexical Einige Editoren nutzen stattdessen eigene OT-(Operational Transform)-basierte Lösungen oder Closed-Source-Cloud-Dienste Hinweise vor dem Start Ausgeschlossen wurden Editoren mit eingestellter Wartung wie Draft.js, Editoren mit nur kleiner Community sowie Editoren mit privatem Quellcode (z. B. Froala) Bei der Barrierefreiheit (a11y) ist bei den meisten Editoren ein gewisser Implementierungsaufwand nötig; dazu sollte man die jeweilige Dokumentation konsultieren Tiptap Ein Editor auf Basis von ProseMirror, der die Komplexität von ProseMirror abstrahiert und dadurch die Developer Experience verbessert Größtenteils unter MIT-Lizenz verfügbar; Echtzeit-Kollaboration kann direkt über Tiptap Cloud oder Liveblocks genutzt werden Obwohl er viele Funktionen bietet, ist die Struktur tree-shakebar, sodass die Größe des Core-Bundles kleiner bleiben kann als bei Quill, Slate und Lexical Erweiterung Tiptap ist so konzipiert, dass sich einfache Nodes, Marks, Commands und Erweiterungen leicht hinzufügen lassen Bei Bedarf kann man das Verhalten bestehender Erweiterungen überschreiben und gezielt anpassen Einige „Pro“-Erweiterungen werden kostenpflichtig angeboten Fortgeschrittene Anpassung Es kann nötig werden, direkt mit der Struktur von ProseMirror zu arbeiten Es dauert etwas, bis man sich an Tiptap-spezifische Abstraktionen wie die Command Chain gewöhnt hat Das Datenmodell ist schema-basiert; meist wird es automatisch erzeugt, bei erweiterten Funktionen kann man das Schema aber auch direkt bearbeiten Nachteile (Drawbacks) Man muss abwechselnd ProseMirror- und Tiptap-Dokumentation konsultieren, was bei Richtlinien verwirrend sein kann Inhalte zur Barrierefreiheit (a11y) hängen stark von den Implementierenden ab Wenn beim Transaktionsprozess der Dokumentzustand unnötig durchlaufen wird, kann die Performance leiden Serverseitige Änderungen Dokumente direkt serverseitig nur mit Tiptap zu manipulieren, ist nicht ganz einfach Dafür sollte man entweder ProseMirror direkt verwenden oder JSON-Dokumente unmittelbar anpassen Liveblocks bietet eine Bibliothek, die Änderungen an ProseMirror-Dokumenten vereinfacht Echtzeit-Kollaboration Tiptap verfügt über eine Erweiterung, die Echtzeit-Kollaboration mit Yjs ermöglicht Die Anbindung an verschiedene Cloud-Lösungen wie Tiptap Cloud und Liveblocks ist möglich Liveblocks Text Editor bietet zusätzlich zu Echtzeit-Kollaboration weitere Funktionen wie Cursor-Anzeige, Kommentare, Mentions und Versionsverlauf Vorteile (Pros) Hervorragende Dokumentation Ausgezeichnete Echtzeit-Kollaborationsfunktionen Framework-unabhängig, mit eigenem Paket für React Hohe Erweiterbarkeit Integration mit Liveblocks oder Tiptap Cloud möglich Nachteile (Cons) Performance kann leiden, wenn man nicht den optimalen Nutzungsmustern folgt Für fortgeschrittene Funktionen ist ein Verständnis der internen ProseMirror-Strukturen nötig Standardmäßig nur begrenzte serverseitige Headless-Editing-Funktionen BlockNote BlockNote ist ein blockbasierter Editor, der Tiptap und ProseMirror erweitert und Funktionen im Notion-Stil bietet Da er größtenteils rund um React entwickelt wurde, lassen sich UI-Komponenten in anderen Frameworks nur schwer nutzen Nötige Funktionen wie Slash-Menü und Floating Toolbar sind bereits enthalten und lassen sich bequem verwenden Einschränkungen BlockNote selbst ist Open Source, für einige Funktionen wie docx- und PDF-Export ist jedoch ein kostenpflichtiges Abonnement erforderlich Echtzeit-Kollaboration Unterstützt Kollaborationsfunktionen auf Basis von Yjs und Liveblocks Eine offizielle Liveblocks-Integration soll in Kürze bereitgestellt werden Vorteile Basiert auf dem stabilitätsgeprüften Tiptap und ProseMirror Bietet Echtzeit-Kollaboration mit Yjs und Liveblocks Blockbasierte Editing-API und UI-Komponenten werden standardmäßig mitgeliefert Nachteile Vor allem für React konzipiert Größere Bundle-Größe als bei grundlegenderen Editoren Lexical Ein von Facebook (Meta) unterstützter Editor, der viel Aufmerksamkeit auf sich zieht Nachdem Liveblocks über mehrere Monate Erweiterungen wie Kommentare, Mentions, Versionsverlauf und Echtzeit-Kollaboration entwickelt hat, entstand der Eindruck, dass sich das Projekt noch in einer frühen Phase befindet Derzeit noch unter Version 1.0 und weiterhin in schneller Entwicklung Einschränkungen Es gibt keine Funktion für „pure decorations“, weshalb für Features wie Cursor-Anzeigen DOM-Elemente separat über dem Editor platziert werden müssen Die grundlegende Yjs-Kollaborationsunterstützung ist derzeit noch anfällig bei Edge Cases Es gibt ein Problem mit hartkodierten Root-Node-Namen, wodurch sich mehrere Editoren innerhalb eines Dokuments nur schwer gleichzeitig verwenden lassen Echtzeit-Kollaboration Ohne das Liveblocks-Paket ist die Implementierung von Kollaboration in Lexical anspruchsvoll In Beispielen wie StickyNotes wird das umgangen, indem für mehrere Root-Nodes jeweils separate Dokumente und Socket-Verbindungen genutzt werden Durch die hohe Entwicklungsgeschwindigkeit werden Probleme laufend behoben Lexical-Erweiterung Lexical verwaltet Daten über eine Node-Hierarchie Eigene Nodes lassen sich durch Vererbung von vier Core-Node-Typen erstellen Mit dem React-spezifischen LexicalComposer und dem Paket @lexical/react lässt sich die Entwicklung beschleunigen Um Lexical im Backend ohne DOM auszuführen, kann das Paket @lexical/headless verwendet werden Serverseitige Änderungen Lexical-Dokumente lassen sich serverseitig ändern, und Liveblocks bietet eine Bibliothek, die das vereinfacht Vorteile Unterstützt Echtzeit-Kollaboration mit Yjs Framework-unabhängig, mit eigenem Paket für React Liveblocks-Unterstützung mit Integration von Kommentaren, Mentions und Versionsverlauf Sehr aktive Entwicklung und große Community mit Unterstützung durch Meta Nachteile Bei der Yjs-Echtzeit-Kollaboration können kleinere Bugs auftreten, wenn Edge Cases nicht direkt behandelt werden Es fehlt an pure decorations; für fortgeschrittene Funktionen sind DOM-Workarounds nötig Das Core-Paket ist größer als bei Tiptap und Slate Slate Ein anpassbares Editor-Framework, das unter anderem bei Discord, Grafana, Sanity.io und Slite eingesetzt wird Liveblocks verwendet Slate standardmäßig für den eigenen Comment Composer Die Datenstruktur ist einfach, vollständig kontrollierbar und auch jenseits von React universell nutzbar Erweiterung von Slate Slate lässt sich anhand zahlreicher Beispiele und Dokumentationen erweitern Das Plugin-Ökosystem ist begrenzt, aber eine Eigenimplementierung ist nicht besonders schwierig Mit Plate existiert ein Projekt, das Slate in erweiterter Form anbietet Einschränkungen Etwas größere Bundle-Größe als Tiptap Wenige integrierte Funktionen, daher muss manches selbst implementiert werden Echtzeit-Zusammenarbeit Mit slate-yjs, @liveblocks/yjs usw. lässt sich Echtzeit-Zusammenarbeit für Slate-Dokumente umsetzen Vorteile Hervorragende Dokumentation Unterstützung für Echtzeit-Zusammenarbeit mit Yjs Framework-unabhängig, mit eigenem React-Paket Hohe Erweiterbarkeit Nachteile Etwas größere Bundle-Größe als Tiptap Mangel an standardmäßig mitgelieferten Funktionen Quill Ein Editor, der in der Vergangenheit unter anderem bei Slack, LinkedIn, Figma, Zoom, Miro und Airtable eingesetzt wurde Die Entwicklung stagnierte eine Zeit lang, wurde aber mit dem Release von Version 2 im April 2024 und einer Neuschreibung in TypeScript wieder deutlich aktiver Verwendet ein eigenes Dokumentmodell namens Parchment, ein Konzept ähnlich dem ProseMirror-Schema Einschränkungen Anders als Lexical gibt es keine Funktion für reine Dekorationen; für Features wie Farbmarkierungen oder Kollaborations-Cursor müssen separate DOM-Elemente als Overlay verwendet werden Viele Plugins für Quill 2 sind noch nicht aktualisiert Die Community kann im Vergleich zu anderen Editoren etwas weniger aktiv sein Echtzeit-Zusammenarbeit Echtzeit-Zusammenarbeit ist durch die Kombination von Yjs und y-quill möglich Als separates Backend sind verschiedene Ansätze wie Liveblocks nutzbar Vorteile Hervorragende Dokumentation Framework-unabhängig, mit eigenem React-Paket Unterstützung für Echtzeit-Zusammenarbeit mit Yjs Verwendet ein einfaches Delta-Format Nachteile Wenige Standardfunktionen, und Plugins sind oft noch nicht an Quill 2 angepasst Fehlende Unterstützung für reine Dekorationen Vergleichsweise weniger aktive Entwicklung und kleinere Community Doppelt so große Bundle-Größe wie Tiptap oder Slate ProseMirror Das Kern-Framework, auf dem zahlreiche Editoren wie Tiptap, Remirror und BlockNote aufbauen Sorgt mit einer klaren Struktur aus Schema, State, View und Transform für stabiles Verhalten Wer einen Editor von Grund auf nur mit der Core-Library aufbauen will, muss in der Regel mit recht viel Code rechnen Einschränkungen In der Dokumentation wird ausdrücklich erwähnt, dass selbst für einen einfachen Editor beträchtlich viel Code nötig ist Es wird empfohlen, Wrapper auf höherer Ebene wie Tiptap, Remirror oder BlockNote zu verwenden Die Lernkurve ist eher steil, Dokumentation und Community sind jedoch gut ausgebaut Vorteile Aktive Community und hervorragende Dokumentation Unterstützung für Echtzeit-Zusammenarbeit mit Yjs Nachteile Für die Umsetzung grundlegender Beispiele ist viel Code erforderlich Wenige standardmäßig mitgelieferte Funktionen Vergleichsweise steile Lernkurve Plate Ein auf Slate basierendes „Batteries included“-Projekt mit umfangreichen Plugins für AI-Funktionen, Mentions, Kommentare und mehr Flexibel, da sich nur die jeweils benötigten Funktionen auswählen lassen Bietet auch kostenpflichtige Templates und ist speziell für React konzipiert Einschränkungen Für Kollaboration wird derzeit offiziell nur Hocuspocus unterstützt; für andere Yjs-Backends wie etwa Liveblocks ist eine eigene Implementierung nötig Da es nur für React gedacht ist, kann die Kompatibilität mit anderen Frameworks eingeschränkt sein Durch den großen Funktionsumfang wächst die Bundle-Größe tendenziell an Vorteile Umfangreiche Plugin-Bibliothek Unterstützung für serverseitige Bearbeitungsfunktionen Templates für einen schnellen Einstieg Nachteile Für React konzipiert Kollaborationsfunktionen nur über Hocuspocus nutzbar Größere Bundle-Größe als bei grundlegenden Editoren Remirror Ein auf ProseMirror basierender Editor, der Tiptap ähnelt, aber einen stärker „Batteries included“-orientierten Ansatz verfolgt Unterstützt mehr als 30 Plugins, React Hooks, Internationalisierung (i18n), Accessibility-Funktionen (a11y) und mehr Ist als Open Source unter der MIT-Lizenz verfügbar und bietet auch Kollaborationsfunktionen Einschränkungen Die Community ist kleiner als bei Tiptap, und Updates können langsamer kommen Viele Funktionen sind React-spezifisch, was andere Umgebungen einschränken kann Die Bundle-Größe ist eher groß Echtzeit-Zusammenarbeit Remirror unterstützt Kollaboration mit Yjs und Liveblocks über YjsExtension Vorteile Hervorragende Dokumentation Umfangreiche Plugin-Bibliothek Unterstützung für Kollaboration mit Yjs und Liveblocks Nachteile Für React konzipiert Größere Bundle-Größe Niedrige Update-Frequenz und kleinere Community Editor.js Ein Rich-Text-Editor mit blockbasierter Bearbeitung, der über viele Plugins und eine große Community verfügt Besitzt eine Datenstruktur aus Blöcken, Inline-Elementen und Tunes Ist framework-unabhängig und bringt verschiedene Komfortfunktionen wie Tooltips bereits mit Einschränkungen Es gibt keine offizielle Unterstützung für Echtzeit-Zusammenarbeit; es existieren zwar einige PR-Versuche, ihr Wartungsstatus ist jedoch unklar Schon das Basispaket ist relativ groß Echtzeit-Zusammenarbeit Wird offiziell nicht unterstützt Vorteile Umfangreiche Plugin-Bibliothek mit vielen Funktionen Community-getragene Integrationen mit verschiedenen CMS- und Backend-Frameworks Nachteile Größere Bundle-Größe Keine Echtzeit-Zusammenarbeit CKEditor Ein Editor mit über 20 Jahren Geschichte, dessen aktuelle Version (5) eine moderne Struktur und einen großen Funktionsumfang bietet Unterstützt verschiedene Frameworks wie Angular, React, Vue und Next Wird unter der GPL-2-Lizenz veröffentlicht, was in bestimmten Fällen Open Source voraussetzt; für kommerzielle Nutzung ist eine separate Lizenz erforderlich Einschränkungen Ein erheblicher Teil der Plugins ist kostenpflichtig, und Kollaborationsfunktionen sind nur über den Cloud-Service von CKEditor verfügbar Die GPL-2-Lizenz und ein lastbasiertes Preismodell können für viele Nutzer eine Hürde darstellen Echtzeit-Zusammenarbeit Außer dem proprietären Cloud-Service von CKEditor werden keine anderen Kollaborationslösungen angeboten Vorteile Sehr umfangreiche Funktionen bereits im Standardumfang Kompatibel mit verschiedenen Frameworks Nachteile Kollaborationsfunktionen sind an den Cloud-Service von CKEditor gebunden Die GPL-2-Lizenz kann für manche Nutzer einschränkend sein Einige Funktionen werden nach nutzungsbasiertem Preismodell angeboten TinyMCE Wie CKEditor ein Editor mit über 20 Jahren Geschichte und unter GPL-2-Lizenz Kann in verschiedenen Umgebungen wie Angular, React und Vue eingesetzt werden Es gibt einen Cloud-Kollaborationsdienst mit einem auf Ladeaufrufen basierenden Preismodell Einschränkungen Wichtige Funktionen wie Markdown, Mentions, Kommentare und fortgeschrittene Typografie werden als kostenpflichtige Plugins angeboten Es gibt wenig Dokumentation dazu, wie sich Dokumente serverseitig manipulieren lassen Echtzeit-Zusammenarbeit Abgesehen von der proprietären Kollaborationslösung von TinyMCE ist kein anderer Ansatz öffentlich dokumentiert Vorteile Sehr umfangreiche Funktionen bereits im Standardumfang Kompatibel mit verschiedenen Frameworks Nachteile Kollaborationsfunktionen sind an den Tiny-Cloud-Service gebunden Die GPL-2-Lizenz kann für manche Nutzer einschränkend sein Einige Funktionen werden nach nutzungsbasiertem Preismodell angeboten Zusammenfassung des Editor-Vergleichs ProseMirror Framework: Vanilla Collaboration: Yjs Comments: Nicht enthalten (Beispiel vorhanden) Mentions: Suggestion-Plugin kann verwendet werden Server-side editing: Dokumente können mit prosemirror-state und prosemirror-model in Node.js bearbeitet werden License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Durch die Integration mit Liveblocks ohne Konfiguration möglich, anpassbar Mentions: Durch die Integration mit Liveblocks ohne Konfiguration möglich, anpassbar Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: Möglich Mentions: Möglich Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Möglich über Liveblocks oder ein angepasstes Beispiel Mentions: Möglich Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, weitere Collaboration: Liveblocks, Yjs Comments: Durch Integration mit Liveblocks ohne Konfiguration möglich, anpassbar Mentions: Durch Integration mit Liveblocks ohne Konfiguration möglich, anpassbar Server-side editing: Möglich über Lexical oder das Node.js-Lexical-Paket von Liveblocks License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: Nicht enthalten (Beispiel vorhanden) Mentions: Beispiel vorhanden Server-side editing: Nicht enthalten License: MIT GitHub Stars: ⭐ 30k Plate Framework: Nur React Collaboration: Hocuspocus (Yjs) Comments: Möglich Mentions: Möglich Server-side editing: Möglich License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: Nicht enthalten (Beispiel vorhanden) Mentions: Drittanbieterbibliothek kann verwendet werden Server-side editing: Nicht enthalten License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: Nicht unterstützt (Drittanbieterbeispiel vorhanden) Comments: Nicht enthalten (Drittanbieterbibliothek vorhanden) Mentions: Nicht enthalten (Beispiel vorhanden) Server-side editing: Nicht enthalten License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: Integration mit CKEditor Cloud Comments: Möglich Mentions: Möglich Server-side editing: Möglich License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, weitere Collaboration: Integration mit Tiny Cloud Comments: Integration mit Tiny Cloud Mentions: Möglich Server-side editing: Nicht enthalten License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 Punkte von xguru 2025-02-10 | 14 Kommentare | Auf WhatsApp teilen

Rich-Text-Editoren (WYSIWYG), die heute in Apps unverzichtbar sind, werden in Diensten wie Linear, Notion und Google Docs allgemein eingesetzt
Liveblocks hat im vergangenen Jahr verschiedene beliebte Editoren analysiert und ihre Vor- und Nachteile zusammengefasst
Editoren lassen sich grob in zwei Kategorien einteilen: „Core-orientiert“ und „Battery-included“
Wenn man nur einen einfachen Editor braucht, sollte man eine leichtgewichtige Option wählen; wenn man einen komplexen Editor mit vielen Kollaborationsfunktionen bauen will, sollte man auf hohe Erweiterbarkeit achten
Insgesamt gilt Tiptap als die naheliegendste Wahl, da es als funktionsreich bewertet wird, ohne zu stark bevormundend zu sein, und eine gute Balance bietet
Kollaboration
- Wir (Liveblocks) haben uns auf Kollaborationsfunktionen konzentriert, und bei den meisten Editoren lässt sich Echtzeit-Kollaboration über die CRDT-Bibliothek Yjs umsetzen
- Für Yjs braucht man einen Backend-Dienst, der Dokumente speichert und die Echtzeitverbindung aufrechterhält
- Liveblocks bietet ein allgemeines Yjs-Backend, das mit mehreren Editoren mit Yjs-Unterstützung verwendet werden kann, sowie integrierte Lösungen für Tiptap und Lexical
- Einige Editoren nutzen stattdessen eigene OT-(Operational Transform)-basierte Lösungen oder Closed-Source-Cloud-Dienste
Hinweise vor dem Start
- Ausgeschlossen wurden Editoren mit eingestellter Wartung wie Draft.js, Editoren mit nur kleiner Community sowie Editoren mit privatem Quellcode (z. B. Froala)
- Bei der Barrierefreiheit (a11y) ist bei den meisten Editoren ein gewisser Implementierungsaufwand nötig; dazu sollte man die jeweilige Dokumentation konsultieren

Tiptap

Ein Editor auf Basis von ProseMirror, der die Komplexität von ProseMirror abstrahiert und dadurch die Developer Experience verbessert
Größtenteils unter MIT-Lizenz verfügbar; Echtzeit-Kollaboration kann direkt über Tiptap Cloud oder Liveblocks genutzt werden
Obwohl er viele Funktionen bietet, ist die Struktur tree-shakebar, sodass die Größe des Core-Bundles kleiner bleiben kann als bei Quill, Slate und Lexical
Erweiterung
- Tiptap ist so konzipiert, dass sich einfache Nodes, Marks, Commands und Erweiterungen leicht hinzufügen lassen
- Bei Bedarf kann man das Verhalten bestehender Erweiterungen überschreiben und gezielt anpassen
- Einige „Pro“-Erweiterungen werden kostenpflichtig angeboten
Fortgeschrittene Anpassung
- Es kann nötig werden, direkt mit der Struktur von ProseMirror zu arbeiten
- Es dauert etwas, bis man sich an Tiptap-spezifische Abstraktionen wie die Command Chain gewöhnt hat
- Das Datenmodell ist schema-basiert; meist wird es automatisch erzeugt, bei erweiterten Funktionen kann man das Schema aber auch direkt bearbeiten
Nachteile (Drawbacks)
- Man muss abwechselnd ProseMirror- und Tiptap-Dokumentation konsultieren, was bei Richtlinien verwirrend sein kann
- Inhalte zur Barrierefreiheit (a11y) hängen stark von den Implementierenden ab
- Wenn beim Transaktionsprozess der Dokumentzustand unnötig durchlaufen wird, kann die Performance leiden
Serverseitige Änderungen
- Dokumente direkt serverseitig nur mit Tiptap zu manipulieren, ist nicht ganz einfach
- Dafür sollte man entweder ProseMirror direkt verwenden oder JSON-Dokumente unmittelbar anpassen
- Liveblocks bietet eine Bibliothek, die Änderungen an ProseMirror-Dokumenten vereinfacht
Echtzeit-Kollaboration
- Tiptap verfügt über eine Erweiterung, die Echtzeit-Kollaboration mit Yjs ermöglicht
- Die Anbindung an verschiedene Cloud-Lösungen wie Tiptap Cloud und Liveblocks ist möglich
- Liveblocks Text Editor bietet zusätzlich zu Echtzeit-Kollaboration weitere Funktionen wie Cursor-Anzeige, Kommentare, Mentions und Versionsverlauf
Vorteile (Pros)
- Hervorragende Dokumentation
- Ausgezeichnete Echtzeit-Kollaborationsfunktionen
- Framework-unabhängig, mit eigenem Paket für React
- Hohe Erweiterbarkeit
- Integration mit Liveblocks oder Tiptap Cloud möglich
Nachteile (Cons)
- Performance kann leiden, wenn man nicht den optimalen Nutzungsmustern folgt
- Für fortgeschrittene Funktionen ist ein Verständnis der internen ProseMirror-Strukturen nötig
- Standardmäßig nur begrenzte serverseitige Headless-Editing-Funktionen

BlockNote

BlockNote ist ein blockbasierter Editor, der Tiptap und ProseMirror erweitert und Funktionen im Notion-Stil bietet
Da er größtenteils rund um React entwickelt wurde, lassen sich UI-Komponenten in anderen Frameworks nur schwer nutzen
Nötige Funktionen wie Slash-Menü und Floating Toolbar sind bereits enthalten und lassen sich bequem verwenden
Einschränkungen
- BlockNote selbst ist Open Source, für einige Funktionen wie docx- und PDF-Export ist jedoch ein kostenpflichtiges Abonnement erforderlich
Echtzeit-Kollaboration
- Unterstützt Kollaborationsfunktionen auf Basis von Yjs und Liveblocks
- Eine offizielle Liveblocks-Integration soll in Kürze bereitgestellt werden
Vorteile
- Basiert auf dem stabilitätsgeprüften Tiptap und ProseMirror
- Bietet Echtzeit-Kollaboration mit Yjs und Liveblocks
- Blockbasierte Editing-API und UI-Komponenten werden standardmäßig mitgeliefert
Nachteile
- Vor allem für React konzipiert
- Größere Bundle-Größe als bei grundlegenderen Editoren

Lexical

Ein von Facebook (Meta) unterstützter Editor, der viel Aufmerksamkeit auf sich zieht
Nachdem Liveblocks über mehrere Monate Erweiterungen wie Kommentare, Mentions, Versionsverlauf und Echtzeit-Kollaboration entwickelt hat, entstand der Eindruck, dass sich das Projekt noch in einer frühen Phase befindet
Derzeit noch unter Version 1.0 und weiterhin in schneller Entwicklung
Einschränkungen
- Es gibt keine Funktion für „pure decorations“, weshalb für Features wie Cursor-Anzeigen DOM-Elemente separat über dem Editor platziert werden müssen
- Die grundlegende Yjs-Kollaborationsunterstützung ist derzeit noch anfällig bei Edge Cases
- Es gibt ein Problem mit hartkodierten Root-Node-Namen, wodurch sich mehrere Editoren innerhalb eines Dokuments nur schwer gleichzeitig verwenden lassen
Echtzeit-Kollaboration
- Ohne das Liveblocks-Paket ist die Implementierung von Kollaboration in Lexical anspruchsvoll
- In Beispielen wie StickyNotes wird das umgangen, indem für mehrere Root-Nodes jeweils separate Dokumente und Socket-Verbindungen genutzt werden
- Durch die hohe Entwicklungsgeschwindigkeit werden Probleme laufend behoben
Lexical-Erweiterung
- Lexical verwaltet Daten über eine Node-Hierarchie
- Eigene Nodes lassen sich durch Vererbung von vier Core-Node-Typen erstellen
- Mit dem React-spezifischen LexicalComposer und dem Paket @lexical/react lässt sich die Entwicklung beschleunigen
- Um Lexical im Backend ohne DOM auszuführen, kann das Paket @lexical/headless verwendet werden
Serverseitige Änderungen
- Lexical-Dokumente lassen sich serverseitig ändern, und Liveblocks bietet eine Bibliothek, die das vereinfacht
Vorteile
- Unterstützt Echtzeit-Kollaboration mit Yjs
- Framework-unabhängig, mit eigenem Paket für React
- Liveblocks-Unterstützung mit Integration von Kommentaren, Mentions und Versionsverlauf
- Sehr aktive Entwicklung und große Community mit Unterstützung durch Meta
Nachteile
- Bei der Yjs-Echtzeit-Kollaboration können kleinere Bugs auftreten, wenn Edge Cases nicht direkt behandelt werden
- Es fehlt an pure decorations; für fortgeschrittene Funktionen sind DOM-Workarounds nötig
- Das Core-Paket ist größer als bei Tiptap und Slate

Slate

Ein anpassbares Editor-Framework, das unter anderem bei Discord, Grafana, Sanity.io und Slite eingesetzt wird
Liveblocks verwendet Slate standardmäßig für den eigenen Comment Composer
Die Datenstruktur ist einfach, vollständig kontrollierbar und auch jenseits von React universell nutzbar
Erweiterung von Slate
- Slate lässt sich anhand zahlreicher Beispiele und Dokumentationen erweitern
- Das Plugin-Ökosystem ist begrenzt, aber eine Eigenimplementierung ist nicht besonders schwierig
- Mit Plate existiert ein Projekt, das Slate in erweiterter Form anbietet
Einschränkungen
- Etwas größere Bundle-Größe als Tiptap
- Wenige integrierte Funktionen, daher muss manches selbst implementiert werden
Echtzeit-Zusammenarbeit
- Mit slate-yjs, @liveblocks/yjs usw. lässt sich Echtzeit-Zusammenarbeit für Slate-Dokumente umsetzen
Vorteile
- Hervorragende Dokumentation
- Unterstützung für Echtzeit-Zusammenarbeit mit Yjs
- Framework-unabhängig, mit eigenem React-Paket
- Hohe Erweiterbarkeit
Nachteile
- Etwas größere Bundle-Größe als Tiptap
- Mangel an standardmäßig mitgelieferten Funktionen

Quill

Ein Editor, der in der Vergangenheit unter anderem bei Slack, LinkedIn, Figma, Zoom, Miro und Airtable eingesetzt wurde
Die Entwicklung stagnierte eine Zeit lang, wurde aber mit dem Release von Version 2 im April 2024 und einer Neuschreibung in TypeScript wieder deutlich aktiver
Verwendet ein eigenes Dokumentmodell namens Parchment, ein Konzept ähnlich dem ProseMirror-Schema
Einschränkungen
- Anders als Lexical gibt es keine Funktion für reine Dekorationen; für Features wie Farbmarkierungen oder Kollaborations-Cursor müssen separate DOM-Elemente als Overlay verwendet werden
- Viele Plugins für Quill 2 sind noch nicht aktualisiert
- Die Community kann im Vergleich zu anderen Editoren etwas weniger aktiv sein
Echtzeit-Zusammenarbeit
- Echtzeit-Zusammenarbeit ist durch die Kombination von Yjs und y-quill möglich
- Als separates Backend sind verschiedene Ansätze wie Liveblocks nutzbar
Vorteile
- Hervorragende Dokumentation
- Framework-unabhängig, mit eigenem React-Paket
- Unterstützung für Echtzeit-Zusammenarbeit mit Yjs
- Verwendet ein einfaches Delta-Format
Nachteile
- Wenige Standardfunktionen, und Plugins sind oft noch nicht an Quill 2 angepasst
- Fehlende Unterstützung für reine Dekorationen
- Vergleichsweise weniger aktive Entwicklung und kleinere Community
- Doppelt so große Bundle-Größe wie Tiptap oder Slate

ProseMirror

Das Kern-Framework, auf dem zahlreiche Editoren wie Tiptap, Remirror und BlockNote aufbauen
Sorgt mit einer klaren Struktur aus Schema, State, View und Transform für stabiles Verhalten
Wer einen Editor von Grund auf nur mit der Core-Library aufbauen will, muss in der Regel mit recht viel Code rechnen
Einschränkungen
- In der Dokumentation wird ausdrücklich erwähnt, dass selbst für einen einfachen Editor beträchtlich viel Code nötig ist
- Es wird empfohlen, Wrapper auf höherer Ebene wie Tiptap, Remirror oder BlockNote zu verwenden
- Die Lernkurve ist eher steil, Dokumentation und Community sind jedoch gut ausgebaut
Vorteile
- Aktive Community und hervorragende Dokumentation
- Unterstützung für Echtzeit-Zusammenarbeit mit Yjs
Nachteile
- Für die Umsetzung grundlegender Beispiele ist viel Code erforderlich
- Wenige standardmäßig mitgelieferte Funktionen
- Vergleichsweise steile Lernkurve

Plate

Ein auf Slate basierendes „Batteries included“-Projekt mit umfangreichen Plugins für AI-Funktionen, Mentions, Kommentare und mehr
Flexibel, da sich nur die jeweils benötigten Funktionen auswählen lassen
Bietet auch kostenpflichtige Templates und ist speziell für React konzipiert
Einschränkungen
- Für Kollaboration wird derzeit offiziell nur Hocuspocus unterstützt; für andere Yjs-Backends wie etwa Liveblocks ist eine eigene Implementierung nötig
- Da es nur für React gedacht ist, kann die Kompatibilität mit anderen Frameworks eingeschränkt sein
- Durch den großen Funktionsumfang wächst die Bundle-Größe tendenziell an
Vorteile
- Umfangreiche Plugin-Bibliothek
- Unterstützung für serverseitige Bearbeitungsfunktionen
- Templates für einen schnellen Einstieg
Nachteile
- Für React konzipiert
- Kollaborationsfunktionen nur über Hocuspocus nutzbar
- Größere Bundle-Größe als bei grundlegenden Editoren

Remirror

Ein auf ProseMirror basierender Editor, der Tiptap ähnelt, aber einen stärker „Batteries included“-orientierten Ansatz verfolgt
Unterstützt mehr als 30 Plugins, React Hooks, Internationalisierung (i18n), Accessibility-Funktionen (a11y) und mehr
Ist als Open Source unter der MIT-Lizenz verfügbar und bietet auch Kollaborationsfunktionen
Einschränkungen
- Die Community ist kleiner als bei Tiptap, und Updates können langsamer kommen
- Viele Funktionen sind React-spezifisch, was andere Umgebungen einschränken kann
- Die Bundle-Größe ist eher groß
Echtzeit-Zusammenarbeit
- Remirror unterstützt Kollaboration mit Yjs und Liveblocks über YjsExtension
Vorteile
- Hervorragende Dokumentation
- Umfangreiche Plugin-Bibliothek
- Unterstützung für Kollaboration mit Yjs und Liveblocks
Nachteile
- Für React konzipiert
- Größere Bundle-Größe
- Niedrige Update-Frequenz und kleinere Community

Editor.js

Ein Rich-Text-Editor mit blockbasierter Bearbeitung, der über viele Plugins und eine große Community verfügt
Besitzt eine Datenstruktur aus Blöcken, Inline-Elementen und Tunes
Ist framework-unabhängig und bringt verschiedene Komfortfunktionen wie Tooltips bereits mit
Einschränkungen
- Es gibt keine offizielle Unterstützung für Echtzeit-Zusammenarbeit; es existieren zwar einige PR-Versuche, ihr Wartungsstatus ist jedoch unklar
- Schon das Basispaket ist relativ groß
Echtzeit-Zusammenarbeit
- Wird offiziell nicht unterstützt
Vorteile
- Umfangreiche Plugin-Bibliothek mit vielen Funktionen
- Community-getragene Integrationen mit verschiedenen CMS- und Backend-Frameworks
Nachteile
- Größere Bundle-Größe
- Keine Echtzeit-Zusammenarbeit

CKEditor

Ein Editor mit über 20 Jahren Geschichte, dessen aktuelle Version (5) eine moderne Struktur und einen großen Funktionsumfang bietet
Unterstützt verschiedene Frameworks wie Angular, React, Vue und Next
Wird unter der GPL-2-Lizenz veröffentlicht, was in bestimmten Fällen Open Source voraussetzt; für kommerzielle Nutzung ist eine separate Lizenz erforderlich
Einschränkungen
- Ein erheblicher Teil der Plugins ist kostenpflichtig, und Kollaborationsfunktionen sind nur über den Cloud-Service von CKEditor verfügbar
- Die GPL-2-Lizenz und ein lastbasiertes Preismodell können für viele Nutzer eine Hürde darstellen
Echtzeit-Zusammenarbeit
- Außer dem proprietären Cloud-Service von CKEditor werden keine anderen Kollaborationslösungen angeboten
Vorteile
- Sehr umfangreiche Funktionen bereits im Standardumfang
- Kompatibel mit verschiedenen Frameworks
Nachteile
- Kollaborationsfunktionen sind an den Cloud-Service von CKEditor gebunden
- Die GPL-2-Lizenz kann für manche Nutzer einschränkend sein
- Einige Funktionen werden nach nutzungsbasiertem Preismodell angeboten

TinyMCE

Wie CKEditor ein Editor mit über 20 Jahren Geschichte und unter GPL-2-Lizenz
Kann in verschiedenen Umgebungen wie Angular, React und Vue eingesetzt werden
Es gibt einen Cloud-Kollaborationsdienst mit einem auf Ladeaufrufen basierenden Preismodell
Einschränkungen
- Wichtige Funktionen wie Markdown, Mentions, Kommentare und fortgeschrittene Typografie werden als kostenpflichtige Plugins angeboten
- Es gibt wenig Dokumentation dazu, wie sich Dokumente serverseitig manipulieren lassen
Echtzeit-Zusammenarbeit
- Abgesehen von der proprietären Kollaborationslösung von TinyMCE ist kein anderer Ansatz öffentlich dokumentiert
Vorteile
- Sehr umfangreiche Funktionen bereits im Standardumfang
- Kompatibel mit verschiedenen Frameworks
Nachteile
- Kollaborationsfunktionen sind an den Tiny-Cloud-Service gebunden
- Die GPL-2-Lizenz kann für manche Nutzer einschränkend sein
- Einige Funktionen werden nach nutzungsbasiertem Preismodell angeboten

Zusammenfassung des Editor-Vergleichs

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Nicht enthalten (Beispiel vorhanden)
- Mentions: Suggestion-Plugin kann verwendet werden
- Server-side editing: Dokumente können mit prosemirror-state und prosemirror-model in Node.js bearbeitet werden
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Durch die Integration mit Liveblocks ohne Konfiguration möglich, anpassbar
- Mentions: Durch die Integration mit Liveblocks ohne Konfiguration möglich, anpassbar
- Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: Möglich
- Mentions: Möglich
- Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Möglich über Liveblocks oder ein angepasstes Beispiel
- Mentions: Möglich
- Server-side editing: Möglich über ProseMirror oder das Node.js-ProseMirror-Paket von Liveblocks
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, weitere
- Collaboration: Liveblocks, Yjs
- Comments: Durch Integration mit Liveblocks ohne Konfiguration möglich, anpassbar
- Mentions: Durch Integration mit Liveblocks ohne Konfiguration möglich, anpassbar
- Server-side editing: Möglich über Lexical oder das Node.js-Lexical-Paket von Liveblocks
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: Nicht enthalten (Beispiel vorhanden)
- Mentions: Beispiel vorhanden
- Server-side editing: Nicht enthalten
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: Nur React
- Collaboration: Hocuspocus (Yjs)
- Comments: Möglich
- Mentions: Möglich
- Server-side editing: Möglich
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Nicht enthalten (Beispiel vorhanden)
- Mentions: Drittanbieterbibliothek kann verwendet werden
- Server-side editing: Nicht enthalten
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: Nicht unterstützt (Drittanbieterbeispiel vorhanden)
- Comments: Nicht enthalten (Drittanbieterbibliothek vorhanden)
- Mentions: Nicht enthalten (Beispiel vorhanden)
- Server-side editing: Nicht enthalten
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: Integration mit CKEditor Cloud
- Comments: Möglich
- Mentions: Möglich
- Server-side editing: Möglich
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, weitere
- Collaboration: Integration mit Tiny Cloud
- Comments: Integration mit Tiny Cloud
- Mentions: Möglich
- Server-side editing: Nicht enthalten
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 Kommentare

bingo992000 2025-03-15

Die Integration von QuillJS in ein SvelteKit-Projekt war ziemlich umständlich. Für React gab es immerhin Bibliotheken, was es etwas einfacher machte.

firea32 2025-02-17

Für die Entwicklung benutzerdefinierter React-Komponenten ist tiptap am angenehmsten, daher fand ich es am besten.

vb6ko 2025-02-11

Ich habe mich vor Kurzem auch damit beschäftigt — danke für die gute Zusammenstellung.

Bei unserem Koreanisch haben manche Editoren auf Mobilgeräten bestimmte kleinere Bugs bei der Eingabe.
Bei der Eingabe von <동해물과> wird dann etwa <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ> eingegeben,
oder bei der Eingabe von <동해물과> erscheint <동동해해물물과과>.
(Referenz: https://github.com/ckeditor/ckeditor5/issues/13693)

Ich nutze keine Frameworks wie react oder vue, und da ich ungern eine Editor-Lizenz kaufen wollte, war die Auswahl für mich sehr eingeschränkt.

Deshalb habe ich mir zusätzlich zum Haupttext noch die folgenden vier angesehen.

https://trix-editor.org/
Das ist ein Editor von 37signals unter der Leitung von DHH von Ruby on Rails. Er ist in reinem JavaScript gebaut (also ohne React o. Ä.) und ließ sich auch nicht allzu schwer anpassen. (z. B. automatische Umwandlung in ein YouTube-Embed beim Einfügen eines YouTube-Links)

https://ui.toast.com/tui-editor
Das ist ein Tool von nhncloud.

https://naver.github.io/smarteditor2/demo/
Das ist Naver SmartEditor2. Es ist klassisch, aber für Services mit koreanischen Nutzern wirkte es so, als würde es wegen seiner Vertrautheit gut angenommen werden.

https://summernote.org/
Das ist Summernote, das von einem Koreaner entwickelt wird. Ich habe mich dafür entschieden. Mit einem Theme wirkt es ziemlich modern, und die Funktionen, die man sich aus koreanischer Perspektive wünscht, sind bereits eingebaut, was praktisch ist. (zum Beispiel die oben erwähnte Umwandlung von YouTube-Links in Embeds) Allerdings wollte ich das mit Tailwind prose gestalten, und da es eigene Typography-Styles mitbringt, musste ich noch etwas Hand anlegen.

teddy418 2025-02-11

Ich möchte Punkt 2 korrigieren: Der tui editor ist kein von Toss, sondern ein Open-Source-Projekt, das von NHN Cloud entwickelt wird.

vb6ko 2025-02-12

Stimmt, ich korrigiere das (ich weiß nicht, wo man das bearbeiten kann..).

moderator 2025-02-16

Zu nhncloud geändert.

carnoxen 2025-02-14

Auf dieser Website gibt es ursprünglich keine Bearbeitungen. Nur ein Administrator kann Änderungen vornehmen.

carnoxen 2025-02-10

Hier zwar nicht erwähnt, aber ich würde mir wünschen, dass WordPress Gutenberg als eigenständige Bibliothek herausgebracht wird.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Es wird zwar erwähnt, aber im Vergleich zu den im Haupttext vorgestellten Lösungen sind die Einsatzbeispiele deutlich begrenzter.

carnoxen 2025-02-11

Oh! Automattic hat das also unter einem anderen Namen weitergeführt. Das war damals meine Lieblingsfunktion, als wir im Unternehmen WordPress verwendet haben.

winterjung 2025-02-10

Der Link führt zum Blog von liveblocks.io, aber als Preview-URL wird (github.com/US-Artificial-Intelligence) angezeigt?

xguru 2025-02-10

Beim Veröffentlichen des Beitrags habe ich versehentlich die URL des vorherigen Beitrags unverändert übernommen, was beim Bearbeiten zu Problemen geführt hat. Ich habe es korrigiert.

tsboard 2025-02-10

Ich habe tiptap zum ersten Mal in einem Projekt eingesetzt und verwendet, und im Vergleich zu anderen traditionellen Editoren waren Dokumentation, Funktionen und Umsetzung alle sehr gut, sodass ich es sehr zufrieden nutze. Es hat mir gefallen, nur genau das Nötige mitzunehmen und die UI nach meinem Geschmack umzusetzen, aber ein etwas überwältigender Punkt war, dass der Arbeitsaufwand für diese Umsetzung nach eigenem Geschmack wirklich nicht ohne war ...!

babadudu 2026-03-30

TinyMce ist gut.