Tiptap
Tiptap (ueberdosis GmbH) · Coding · Produktivität
Tiptap ist ein headless und quelloffenes Editor-Framework auf Basis von ProseMirror. Es bringt über 100 Erweiterungen und bezahlte Werkzeuge für Zusammenarbeit mit, damit Teams eigene Editoren bauen.
Über Tiptap
What Is Tiptap
Tiptap ist ein headless Framework für Rich-Text-Editoren, gedacht für Entwickler, die Aussehen und Verhalten ihres Editors vollständig steuern wollen. Es packt ProseMirror, eine bewährte Engine für Web-Editoren, in eine moderne API, die unter React, Vue, Svelte, Angular und reinem JavaScript gleich läuft. Der offene Kern ist unter der MIT-Lizenz kostenlos, und die bezahlte Plattform legt Zusammenarbeit, Kommentare, Versionsverlauf und KI-Funktionen obendrauf.
Der Grund für die Wahl liegt nicht in einem fertigen Look. Eine Symbolleiste oder ein vorgefertigtes Layout gibt es gar nicht. Genau das ist der Punkt. Sie bestimmen jedes Menü, jede Sprechblase und jede Tastenkombination selbst und laden nur die Erweiterungen, die Ihr Produkt wirklich braucht. Wer Notion-artige Notizen, E-Mail-Editoren oder Redaktionswerkzeuge baut, startet mit einem Fundament statt mit einem festen Baustein.
Die größte Hürde sind die Einarbeitung und die Kostenverteilung. Der Editor ist kostenlos, aber alles rund um Tiptap Cloud (Live-Zusammenarbeit, gehostete Dokumente, Kommentare) läuft über ein Abo, abgerechnet pro Dokument und pro Entwicklerlizenz. Selbst hosten lässt sich das über das offene Hocuspocus-Backend, wenn Sie die Infrastruktur lieber selbst betreiben.
Getting Started
- Installieren Sie die Kernpakete von npm, etwa
@tiptap/coreund@tiptap/starter-kit, in einem Projekt mit Ihrem Framework. - Legen Sie eine Editor-Instanz an und übergeben Sie die gewünschten Erweiterungen, beginnend mit StarterKit für die Grundformatierung.
- Binden Sie den Editor in Ihre Oberfläche ein und ergänzen Sie eigene Leiste, Menüs und Stile, denn das Framework liefert keine mit.
- Verbinden Sie die Erweiterungen für Zusammenarbeit und einen Hocuspocus- oder Tiptap-Anbieter, wenn Sie Echtzeit-Bearbeitung brauchen.
- Starten Sie die kostenlose Testphase im Tiptap-Cloud-Dashboard, um bezahlte Funktionen wie Kommentare und Versionsverlauf vor dem Abo zu prüfen.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Tiptap.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Produktteams, die Notiz- oder Dokument-Apps bauen
- Teams, die selbst hosten wollen
- Entwickler von Inhaltsplattformen
Aufgaben
- Einen eigenen Rich-Text-Editor bauen
- Echtzeit-Zusammenarbeit ergänzen
- Änderungen an einem Dokument nachvollziehen
- Einem KI-Agenten Bearbeitungsrechte geben
- Einen Dokumentenablauf steuern
Szenarien
- Ein SaaS-Produkt, das einen eingebauten Editor passend zur eigenen Oberfläche braucht
- Ein Redaktionsteam, das Word-Dateien importiert
- Ein regulierter Betrieb mit Vorgaben zum Datenstandort
Wichtigste Funktionen
Headless-Architektur
Der Editor bringt gar keine Oberfläche mit. Sie bekommen die Bearbeitungslogik und zeichnen eigene Leiste, Sprechblasenmenü und Layout. Deshalb passt Tiptap zu Produkten mit strengen Designsystemen, in denen ein fertiger Baustein mit allem anderen kollidieren würde.
Unabhängig vom Framework
Tiptap läuft mit React, Vue 3 und Vue 2, Svelte, Angular, Next.js, Nuxt und reinem JavaScript. Für die großen Frameworks gibt es offizielle Pakete, für den Rest Bindings aus der Community. Sie installieren denselben Kern und tauschen nur die Rendering-Schicht für Ihren Stack.
Modulares Erweiterungssystem
Über 100 offizielle und Community-Erweiterungen decken Formatierung, Tabellen, Codeblöcke mit Syntaxhervorhebung, Bilder, Erwähnungen und eigene Nodes ab. Sie aktivieren nur, was Sie brauchen. StarterKit bündelt die gängigen, ein einfacher Editor steht damit in Minuten.
Echtzeit-Zusammenarbeit
Die Erweiterungen gleichen Bearbeitungen zwischen Nutzern über das Yjs-CRDT ab und laufen auf dem offenen Hocuspocus-Backend oder auf Tiptap Cloud. Präsenzanzeigen, Cursor-Verfolgung und Konfliktbehandlung sind eingebaut, Sie müssen die Sync-Schicht nicht selbst bauen.
Kommentare und Versionsverlauf
Kommentare hängen Gesprächsfäden an Dokumente, und der Versionsverlauf lässt jeden früheren Stand wiederherstellen. Snapshot Compare hebt hervor, was sich zwischen zwei Versionen geändert hat, wichtig bei juristischen, redaktionellen und Compliance-Dokumenten, wo die Spur belastbar sein muss.
Tracked Changes
Tracked Changes aktiviert Vorschlagsmodus und Korrektur. Prüfer schlagen Bearbeitungen vor, Einfügungen und Löschungen werden verfolgt, und Änderungen lassen sich einzeln oder gesammelt annehmen oder ablehnen. Jeder Vorschlag trägt eine Zuordnung, Sie wissen also, wer was vorgeschlagen hat.
AI Toolkit
Das AI Toolkit gibt einem KI-Agenten Fähigkeiten zur Dokumentbearbeitung. Es liest Auswahlen und ganze Dokumente, setzt präzise Patches, streamt Inhalte und zeigt KI-Vorschläge zur Prüfung. Das Bewusstsein für das Schema hält den Agenten in den Regeln, die Ihr Editor vorgibt.
Dokument-Import und -Export
Import und Export decken DOCX, Markdown, PDF, ODT und EPUB ab. Ein Team, das von Word umzieht oder einen Blog aufbaut, holt Inhalte herein und gibt sie wieder aus, ohne einen Konverter von Grund auf zu schreiben.
REST-API und Webhooks
Der Team-Tarif und höher ergänzen Webhooks und Zugang zur REST-API samt Dokumentbearbeitung im Backend. Sie holen Dokumente als JSON, schieben programmatische Änderungen und bekommen eine Meldung, wenn sich Inhalte ändern.
Vor- und Nachteile
Vorteile
- Der offene Kern ist unter der MIT-Lizenz kostenlos, Sie liefern also einen eigenen Editor ohne Abo aus.
- Das headless Design biegt den Editor auf die Oberfläche Ihres Produkts statt umgekehrt.
- Über 100 Erweiterungen und offizielle Framework-Pakete verkürzen den Bau gängiger Funktionen.
- Selbst hosten über Hocuspocus lässt datenschutzbewusste Teams Dokumente auf eigenen Servern behalten.
- Import und Export bündeln DOCX, Markdown, PDF, ODT und EPUB an einer Stelle.
Nachteile
- Der Editor bringt keine Oberfläche mit, jede Leiste und jedes Menü bauen Sie selbst, was anfangs Arbeit macht.
- Zusammenarbeit, Kommentare und Versionsverlauf verlangen einen bezahlten Tarif, der pro Dokument und pro Entwickler skaliert.
- Gehostete Dokumente zählen gegen das Tariflimit, und ein Überschreiten löst still eine automatische Hochstufung aus.
- Die ausgefeiltesten Vorlagen und die Zusatzmodule AI Toolkit und Tracked Changes haben einen individuellen Preis, der nicht veröffentlicht wird.
Häufige Fragen
Tiptap ist ein headless Framework für Rich-Text-Editoren, mit dem sich eigene Editoren im Web bauen lassen. Entwickler nutzen es für Notion-artige Notiz-Apps, Kommentarsysteme, E-Mail-Editoren und Inhaltsplattformen, bei denen die Oberfläche zum eigenen Produkt passen muss.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Tiptap.
Alternativen zu Tiptap
Udon
Udon · Coding · ProduktivitätUdon macht aus einem Apple-Silicon-Mac einen Heimserver, den Sie im Browser steuern, mit Containern, Dateifreigaben und einem optionalen KI-Systemadministrator.
offstage
offstage cloud · Coding · Produktivitätoffstage gibt KI-Agenten und CI-Jobs einen echten Mac: ein frisches macOS-27-Konto auf Apple Silicon, per API gesteuert und sekundengenau abgerechnet.
BotBus
Chengdu Tuyang Tusen Technology Co., Ltd. · Coding · ProduktivitätMit BotBus lassen sich KI-Agenten vom Smartphone steuern, auch wenn der Rechner im Büro steht: Befehle freigeben, Aufgaben starten, Ergebnisse lesen.