React

The following guide describes how to integrate Tiptap with your React project. We’re using Vite here, but the workflow should be similar with other setups.

Create a react project (optional)

Let’s start with a fresh React project called my-tiptap-project. Vite will set up everything we need.

# create a project with npm
npm create vite@latest my-tiptap-project -- --template react-ts

# OR, create a project with pnpm
pnpm create vite@latest my-tiptap-project --template react-ts

# OR, create a project with yarn
yarn create vite my-tiptap-project --template react-ts

# change directory
cd my-tiptap-project

Install dependencies

Time to install the @tiptap/react package, @tiptap/pm (the ProseMirror library) and @tiptap/starter-kit, which includes the most popular extensions to get started quickly.

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

If you followed step 1 and 2, you can now start your project with npm run dev, and open http://localhost:3000 in your browser.

Integrate Tiptap

To actually start using Tiptap we need to create a new component. Let’s call it Tiptap and put the following example code in src/Tiptap.tsx.

// src/Tiptap.tsx
import { EditorProvider, FloatingMenu, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

// define your extension array
const extensions = [StarterKit]

const content = '<p>Hello World!</p>'

const Tiptap = () => {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <FloatingMenu editor={null}>This is the floating menu</FloatingMenu>
      <BubbleMenu editor={null}>This is the bubble menu</BubbleMenu>
    </EditorProvider>
  )
}

export default Tiptap

Important Note: You can always use the useEditor hook if you want to avoid using the Editor context.

// src/Tiptap.tsx
import { useEditor, EditorContent, FloatingMenu, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

// define your extension array
const extensions = [StarterKit]

const content = '<p>Hello World!</p>'

const Tiptap = () => {
  const editor = useEditor({
    extensions,
    content,
  })

  return (
    <>
      <EditorContent editor={editor} />
      <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
      <BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu>
    </>
  )
}

export default Tiptap

Add it to your app

Finally, replace the content of src/App.tsx with our new Tiptap component.

import Tiptap from './Tiptap'

const App = () => {
  return (
    <div className="card">
      <Tiptap />
    </div>
  )
}

export default App

Consume the Editor context in child components

If you use the EditorProvider to setup your Tiptap editor, you can now easily access your editor instance from any child component using the useCurrentEditor hook.

import { useCurrentEditor } from '@tiptap/react'

const EditorJSONPreview = () => {
  const { editor } = useCurrentEditor()

  return <pre>{JSON.stringify(editor.getJSON(), null, 2)}</pre>
}

Important: This won't work if you use the useEditor hook to setup your editor.

You should now see a pretty barebones example of Tiptap in your browser.

Add before or after slots

Since the EditorContent component is rendered by the EditorProvider component, we now can't directly define where to render before or after content of our editor. For that we can use the slotBefore & slotAfter props on the EditorProvider component.

<EditorProvider
  extensions={extensions}
  content={content}
  slotBefore={<MyEditorToolbar />}
  slotAfter={<MyEditorFooter />}
/>

Container props

The EditorProvider component accepts a editorContainerProps prop that allows you to pass props to the container element of the editor provider.

<EditorProvider
  extensions={extensions}
  content={content}
  editorContainerProps={{ className: 'editor-container' }}
/>

Optimize your performance

We strongly recommend visiting the React Performance Guide to integrate the Tiptap Editor efficiently. This will help you avoid potential issues as your app scales.