Next.js

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

npx @tiptap/cli@latest 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.

Only add styles

If you added a template or UI components during setup, you can skip this section and proceed directly to Add Styles.

A new project still shows the default Next.js page

init scaffolds a standard Next.js app and copies the components you chose into your components/ folder as source — but it does not modify app/page.tsx. Until you render a Tiptap component there yourself, npm run dev shows Next.js's default starter page. This is expected, not a broken install.

Render the editor

Open app/page.tsx and render the template or component you installed. For example, if you added the Simple Editor template during init:

import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function Page() {
  return <SimpleEditor />
}

Start the dev server and open the page to see your editor:

npm run dev

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 { 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

Styles are added automatically

When you install your first Tiptap UI Component, the CLI automatically adds the required .scss imports to your main stylesheet. In most cases, no manual setup is needed.

Before proceeding, ensure your project includes a CSS reset. If you are using Tailwind CSS, you already have one.

Where styles are imported

The CLI automatically injects style imports into your global stylesheet, such as:

app/globals.css
src/app/globals.css

If you’ve customized your entry file, make sure this is present:

File: app/globals.css or src/app/globals.css (depending on your project)

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

Learn more about configuring styles in the style setup guide.

PreviouslyOverview

Next upVite