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

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:

styles/global.css

File: styles/global.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.

PreviouslyLaravel

Next upManual