Tiptap Editor 3.0 Beta is out. Start here

Don’t bend it, extend it.

Our editor does what you would expect from a modern editor, and probably way more than that. With tons of extensions there’s a lot to explore for you.

Nodes

Quoting other people will make you look clever.

Everything looks more serious with a few bullet points.

The less code the better, but sometimes you just need multiple lines.

CodeBlock Lowlight

Add some colorful syntax highlighting to your code blocks.

Add collapsible details nodes to your editor content.

Add content to your details nodes.

Add a summary to your details nodes.

Everyone needs it, nobody talks about it: the Document extension.

Render emojis as inline nodes with fallback images for unsupported emojis.

Sometimes we all need a break, even if it’s just a line break.

Structure the content with headings (comes with up to 6 different levels).

Horizontal Rule

The least code the better, but sometimes you just need multiple lines.

Add an image (ideally a beautiful one), when words aren’t enough.

Simply does its job. Doesn’t even care if it’s part of a bullet list or an ordered list.

Mention other users with a suggestion popup and full control over the rendering.

If a bullet list doesn’t look serious enough, put some numbers in front of it.

Mom, look! I wrote a paragraph on the Internet.

You’re working on something really serious if you need tables inside a text editor.

It’s useless without all its other table friends: the table cell.

Tables don’t require a header, but let’s be honest: They look better with it.

The perfect middle ground between a table and a table cell.

The actually task; without it, the task list would be nothing.

Adds support for tasks (though it won’t make sure you actually complete them).

No text editor without text, so better make sure to install this one.

Easily embed YouTube videos into your documents.

Marks

Make your text bold and let it stand out.

Developers love to add some inline code to their texts.

Make it look nerdier with some colorful text highlights.

Helps to emphasize your text; it doesn’t bring you closer to Italy, though.

Link it, link it good, link it real good (and don’t forget the href).

Cut through the words you wrote if you’re too afraid to delete them.

Write slightly below the normal line to make a statement.

Write slightly above the normal line to show you’re on the next level.

Otherwise useless, it adds <span> tags required by other extensions.

Add a line below your text to make it look more… underlined.

Functionality

Integrate an AI Assistant that can read and edit your document based on a user-defined task.

Compares documents before and after AI made adjustments, and displays the diff as a set of changes.

Integrate AI-driven text and content generation directly into the editor.

Enhance your editor with AI-powered proofreading suggestions.

Add a toolbar that pops up above the text. Great to apply inline formatting.

Character Count

Limit the number of characters in your editor, or at least count them.

Collaborative text editing can be fricking complex, but it doesn’t have to be that way.

Collaboration Cursor

See other users’ cursors and names while they type.

Add text color support to your editor (comes with unlimited colors).

Enable discussions in your collaborative documents—the way you want them.

Compare Snapshots

Compare snapshots of versions of your documents to see changes made between two versions.

Have you ever wanted to drag nodes around your editor? Well, we did too.

Drag Handle React

Have you ever wanted to drag nodes around your react-based editor? Well, we did too.

Drag Handle Vue

Have you ever wanted to drag nodes around your vue-based editor? Well, we did too.

Adds a cursor when something is dragged inside the editor.

Export Tiptap content to docx, odt, or markdown.

Have you ever wanted to drag and drop or paste files into your editor? Well, we did too.

Make a toolbar appear automagically on empty lines.

Keep track of where the cursor is, and let the user know you know it.

Doesn’t have support for Comic Sans, but for all other fonts.

The gapcursor prevents the cursor from getting stuck… in a gap.

Import documents from docx, odt, or markdown to Tiptap.

Invisible Characters

Allow your users to see invisible characters like spaces, hard breaks, and paragraphs.

Lists’ behavior can be tricky, so we made this small extension to make them easier to work with.

This extension allows your users to write and visualize mathematical formulas via LaTeX.

Configure a helpful placeholder to fill the emptiness.

All the popular extensions in a one. It doesn’t get much better than this.

Table of contents

Add a table of contents listing all your anchors or headlines.

Left, right, center, whatever! Align the text however you like.

The typography expert for your editor, fixing everything that’s wrong.

Undo and redo changes in your Tiptap Editor with ease, allowing you to revert or reapply edits in your editor.

Add a unique ID to every single node and keep track of them.

Version History

Document version history for manual and automatic versioning of your documents.