tiptap reference

What is tiptap?

tiptap is a headless framework built on top of ProseMirror that helps you use customisable building blocks to create web editors. Here are its main features.

• Headless: it doesn’t come with any markup or CSS.
• Framework agnostic – can be used with React, Vue, or vanilla JS.
• TypeScript support.

Basic setup

Run:

npm install @tiptap/react @tiptap/starter-kit

To setup tiptap, you usually have to do three things;

1. Specify where TipTap should render (element) (for vanilla JS integrations)
2. Specify the functionalities you want (extensions)
3. Specify the initial document (content)

Here’s how to setup TipTal in vanilla JS:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

new Editor({
  element: document.querySelector('.element'),
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '<p>Example Text</p>',
  autofocus: true,
  editable: true,
  injectCSS: false,
})

Extensions

TipTap has an extension system where each extension adds specific functionality to the editor. See here the list of default extensions.

You can use @tiptap/starter-kit to use the most common extensions, use community extensions, or create your own.

Styling

See docs. You can also customise the markup generated by default extensions (e.g., generate <b> tags instead of <strong> when boldening text).

Hook into events

tiptap fires a number of events that you can hook into.

For example, if you’re using the React integration, you can do something like:

const editor = useEditor({
  extensions: [StarterKit],
  content: '',
  onUpdate: ({ editor }) => {
    console.log('Editor contents updated:', editor.getText())
  },
})

Examples

See here for some demos and here for the corresponding source code.

Sources

• tiptap.dev docs
• Installation for React project