Next.js

Run the init command to create a new Next.js project or to setup an existing one:

pnpm dlx @tiptap/cli init

Choose between a Next.js project or a Monorepo.

When prompted with:

Would you like to add a template or UI components to your project?

Select UI Components if you want to include reusable Tiptap UI components. Alternatively, select Template to scaffold a full example project.

Add Tiptap Components

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

pnpm dlx @tiptap/cli 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 { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>Heading 1</HeadingButton>
      <HeadingButton level={2}>Heading 2</HeadingButton>
      <HeadingButton level={3}>Heading 3</HeadingButton>
    </>
  )
}

Add Styles

To enable support for SCSS, install the SCSS compiler:

pnpm add -D sass

Then, to ensure the component and editor have the correct variables and animations, manually import the SCSS partials into your main stylesheet global.css:

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