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'),
    },
  },
})

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

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.