tiptap/docs/installation/react.md

title	tableOfContents
React WYSIWYG	true

React

Introduction

The following guide describes how to integrate tiptap with your React project.

Requirements

• Node installed on your machine
• Experience with React

Using a template

If you just want to get up and running with tiptap you can use the tiptap Create React App template by @alb to automatically create a new project with all the steps below already completed.

# create a project based on the tiptap template
npx create-react-app tiptap-example --template tiptap

1. Create a project (optional)

If you already have an existing React project, that’s fine too. Just skip this step and proceed with the next step.

For the sake of this guide, let’s start with a fresh React project called tiptap-example. Create React App sets up everything we need.

# create a project
npx create-react-app tiptap-example

# change directory
cd tiptap-example

2. Install the dependencies

Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the @tiptap/react package, with a few components, and @tiptap/starter-kit which has the most common extensions to get started quickly.

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

# install with Yarn
yarn add @tiptap/react @tiptap/starter-kit

If you followed step 1 and 2, you can now start your project with npm run start or yarn start, and open http://localhost:3000 in your favorite browser. This might be different, if you’re working with an existing project.

3. Create a new component

To actually start using tiptap, you’ll need to create a new component in your app. Let’s call it Tiptap and put the following example code in src/Tiptap.jsx.

This is the fastest way to get tiptap up and running with React. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '<p>Hello World! 🌎️</p>',
  })

  return (
    <EditorContent editor={editor} />
  )
}

export default Tiptap

4. Add it to your app

Now, let’s replace the content of src/App.js with the following example code to use our new Tiptap component in our app.

import Tiptap from './Tiptap.jsx'

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

export default App

You should now see tiptap in your browser. Time to give yourself a pat on the back! :)

5. The complete setup (optional)

Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then:

https://embed.tiptap.dev/preview/Examples/Default