Laravel

Use the command below to scaffold a new Laravel project with React support:

laravel new my-app --react

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.