Vite

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

pnpm 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:

pnpm add -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:

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

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.

To enable support for SCSS, install the SCSS compiler:

pnpm add -D sass-embedded

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

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