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

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.