Examples
It's hard to get started with a new library. We know that and that's why we created a bunch of examples for you. They cover a wide range of use cases and show you how to use Tiptap in your project.
Default text editor
Learn how to create a default text editor with Tiptap.
Markdown shortcuts
Add markdown shortcuts to your Tiptap Editor.
Tables
Images
Formatting
Add content formatting to your Tiptap Editor.
Tasks
Long texts
Keep a good performance with huge amount of content.
Minimal setup
Keep it simple and clean with a minimal Tiptap Editor setup.
Collaborative editing
Build collaborative editors with Tiptap Editor.
Menus
Add bubble and floating menus to your editor.
Drawing
Add a custom NodeView with drawing support to your Tiptap Editor.
Mentions
Allow users to mention others in your documents.
Forced content structure
Enforce specific content structures like headings in your editor.
Clever Editor
Make your editor clever with custom replacement extensions.
Interactive React & Vue views
Use React or Vue components in your Tiptap Editor content.
Syntax highlighting
Implement syntax highlighting to codeblocks in your Tiptap Editor.
Experiments
The following examples are experiments, meaning they are not supported or maintained. They are here to show you what's possible with Tiptap and to inspire you to create your own extensions.
Collaborative fields
Save separate data to one collaborative Yjs document with Tiptap via fields.
Figure
Create image nodes and enhance them with figures.
Generic Figure
Create nodes with figure support via a generic figure extension.
iFrame
Linting
Create a document linter for your Tiptap editor.
Slash commands
Add a toolbar that pops up at the slash position
