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