Astro

Use the command below to scaffold a new Astro project with TypeScript.

npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./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 React from 'react'
import { HeadingButton } from '@/components/ui/heading-button'

export default function EditorPage() {
  // Tiptap setup...

  return (
    <div className="editor-page">
      <div className="toolbar">
        <HeadingButton level={1}>Heading 1</HeadingButton>
        <HeadingButton level={2}>Heading 2</HeadingButton>
        <HeadingButton level={3}>Heading 3</HeadingButton>
      </div>
      {/* Your editor component */}
    </div>
  )
}

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 in React App, install the SCSS compiler:

npm install -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 or src/App.css:

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

Learn more about configuring styles in the style setup guide.