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.