Getting Started

PreviousNext

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

Docs
platefile

Preview

Loading preview…
../../docs/installation.mdx
---
title: Getting Started
description: 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

### Option 1: With Plate UI (Recommended)

Leverage [Plate UI](/docs/plate-ui) for a rich, pre-configured editor experience, especially if you're using or plan to use [shadcn/ui](https://ui.shadcn.com/).

<Steps>

#### Install Plate UI

Begin by following the **[Plate UI Installation Guide](./installation/plate-ui)**. 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](./installation/next)** - For server-side rendered applications
*   **[React](./installation/react)** - For client-side applications (Vite, React Router, etc.)

</Steps>

### Option 2: Manual Setup

For projects not using shadcn/ui, Tailwind CSS, or those requiring a framework-agnostic solution, follow the **[Manual Installation Guide](./installation/manual)** for detailed instructions.

<Callout type="note">
  You can always integrate Plate UI components into a manual setup later.
</Callout>

## 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](./installation/rsc)** 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](./installation/node)** for detailed instructions.

## Next Steps

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

-   **Configuration:**
    -   [Editor Configuration](/docs/editor)
    -   [Plugin Configuration](/docs/plugin)
    -   [Plugin Components](/docs/plugin-components)
-   **Support & Community:**
    -   [Troubleshooting Guide](/docs/troubleshooting)
    -   Join our [Discord Community](https://discord.gg/mAZRuBzGM3)
    -   Participate in [GitHub Discussions](https://github.com/udecode/plate/discussions)

Installation

npx shadcn@latest add @plate/installation-docs

Usage

Usage varies by registry entry. Refer to the registry docs or source files below for details.