Tiptap Docs

React Router

Use the command below to scaffold a new React project with TypeScript and then add React Router.

npx create-react-router@latest my-app

Add Tiptap components

Install Tiptap UI components using the CLI. For example, to add the HeadingButton component:

npx @tiptap/cli@latest add heading-button

The command above will install the HeadingButton component and its dependencies. You can then import and use it in your Tiptap project:

import React from 'react' import { HeadingButton } from '@/components/ui/heading-button'  export default function EditorPage() {  // Tiptap setup...   return (  <div className="editor-page">  <div className="toolbar">  <HeadingButton level={1}>Heading 1</HeadingButton>  <HeadingButton level={2}>Heading 2</HeadingButton>  <HeadingButton level={3}>Heading 3</HeadingButton>  </div>  {/* Your editor component */}  </div>  ) }

Add Styles

Bun projects automatically convert SCSS to CSS

If you’re using Bun, the CLI automatically converts all .scss files into .css files during installation. This means your imports should use .css instead of .scss, for example:

@import './styles/_variables.css';
@import './styles/_keyframe-animations.css';

Before proceeding, ensure that your project includes a CSS reset. If you're using Tailwind CSS, you can skip this step since it comes with a built-in reset.

Import the global SCSS styles in the main stylesheet:

File: app/globals.css

@import '../styles/_variables.scss'; @import '../styles/_keyframe-animations.scss';

Learn more about configuring styles in the style setup guide.

PreviouslyVite