Vite

Use the command below to scaffold a new Vite project. When prompted, choose React + TypeScript.

npm create vite@latest

Configure TypeScript Paths

Vite splits TypeScript config into multiple files. You'll need to update both tsconfig.json and tsconfig.app.json.

Within tsconfig.json add the following inside compilerOptions:

{
  // ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

In tsconfig.app.json update these compilerOptions:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  // ...
}

Update Vite Configuration

To enable path aliases and avoid __dirname type errors:

Install Node types:

npm install -D @types/node

And then edit vite.config.ts:

import path from 'path'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Render the editor

A new project still shows the default Vite page

Scaffolding creates a standard Vite + React app. Adding components copies them into src/components/ as source, but src/App.tsx still renders Vite's default starter page until you render a Tiptap component there yourself. This is expected, not a broken install.

Replace the contents of src/App.tsx with the template or component you installed. For example, the Simple Editor template:

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

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

Start the dev server 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:

src/index.css (depending on your project)

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

File: src/index.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.

PreviouslyInstall

Next upReact Router