Tiptap Editor 3.0 Beta is out. Start here

Components overview

Components and Node Components offer prebuilt functionality for integrating with Tiptap’s features (with node components being elements within the editor content), while primitives are the fundamental, low-level UI pieces used as the backbone for building these richer interactions.

Components

Toggle through headings with a button.

Heading dropdown

Select heading levels from a dropdown menu.

Highlight popover

Select a highlight from a popover.

Image upload button

Upload an image by triggering a button.

Add a popover element featuring link options.

Toggle through bullet, ordered or task lists with a button.

Select a list type from a dropdown menu.

Add a button to trigger a text mark like bold, italics, etc.

Add a button that toggles through block-level nodes like blockquotes.

Text align button

Switch through text alignment options with a button

Undo or redo an action with a button

Node Components

Code block UI node

Add a code block node component to your editor.

Integrate an image node UI component.

Image upload node

Upload an image via a node UI component

Add a node component that renders lists.

Add a paragraph UI node component

Primitives

Add a button UI component into your Tiptap editor.

Select an option from a dropdown menu UI component.

Integrate a pop-up UI element next a selection.

Separate menu items in toolbars from one another.

Add some space between your menu items.

Organize actions and controls in a toolbar UI component.

Add a popup that appears when you hover over elements.