Command Palette

Search for a command to run...

Getting Started

Choose your path to integrate the Plate rich-text editor framework into your React project.

Plate offers multiple integration paths depending on your project needs and environment. Choose the approach that best matches your requirements.

Client-Side Integration

Leverage Plate UI for a rich, pre-configured editor experience, especially if you're using or plan to use shadcn/ui.

Install Plate UI

Begin by following the Plate UI Installation Guide. This guide covers installing core dependencies and setting up Plate UI components.

Basic Usage

Once Plate UI is set up, choose the guide that matches your React application type:

  • Next.js - For server-side rendered applications
  • React - For client-side applications (Vite, React Router, etc.)

Option 2: Manual Setup

For projects not using shadcn/ui, Tailwind CSS, or those requiring a framework-agnostic solution, follow the Manual Installation Guide for detailed instructions.

You can always integrate Plate UI components into a manual setup later.

Server-Side Integration

React Server Components

For leveraging Plate in React Server Components (RSC) for tasks like static content generation or server-side data processing without client-side interactivity.

Follow the RSC Guide for detailed instructions.

Node.js Environment

For using Plate in a Node.js environment for backend tasks such as data processing, content migration, or validation.

Follow the Node.js Guide for detailed instructions.

Next Steps

After setting up Plate, explore these resources to further customize and enhance your editor: