From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Introduction
  • Installation
    • Plate UI
      • Next.js
      • React
    • Manual
    • RSC
    • Node.js
    • Local Docs
    • MCP
  • Releases

Getting Started

PreviousNext

Choose the right Plate installation path for your React project.

Plate has different setup paths for UI-first editors, headless React editors, server components, and backend processing. Start with Plate UI when you want a complete editor surface. Use the lower-level guides when you need to own the rendering, runtime environment, or server-only pipeline.

Requirements

SurfaceRequirement
Plate React APIs and Plate UIReact and React DOM 19.2 or later. Plate's React packages declare >=19.2.0 peer dependencies.
Copied Plate UI sourceEnable React Compiler in the app that owns the copied components. Registry components rely on Compiler-owned memoization. The shadcn command installs packages and files; it does not configure your build tool. Follow the React Compiler installation guide for your framework.
IntroductionReleases

On This Page

RequirementsChoose a PathInstall Plate UIPick the Runtime GuideAdd FeaturesOther EnvironmentsNext Steps
Build your editor
Production-ready AI template and reusable components.
Get all-access
Published Plate packagesNo consumer Compiler step is needed for imported package code. Plate compiles its packages for the React 19 runtime before publishing.

These are separate boundaries: React 19.2 is the package compatibility floor, while React Compiler configuration belongs to the app that builds copied Plate UI source.

Choose a Path

Plate UI

Recommended. Install the shadcn-based editor UI, kits, and starter components.

Next.js

Use Plate in a server-rendered React app.

React

Use Plate in Vite, React Router, or another client-side React app.

Manual

Build a headless editor with direct package installs.

Install Plate UI

Use Plate UI when you want the fastest working editor path.

pnpm dlx shadcn@latest add @plate/plate-ui
pnpm dlx shadcn@latest add @plate/plate-ui

Pick the Runtime Guide

After Plate UI is installed, choose the runtime guide that matches your app:

  • Next.js for server-rendered React apps.
  • React for Vite, React Router, and other client-side apps.

Add Features

Use feature kits when you want complete plugin + UI wiring. Use manual plugin docs when you want only the headless package behavior.

Other Environments

EnvironmentUse it whenGuide
Manual ReactYou do not want Plate UI or shadcn/ui.Manual Installation
React Server ComponentsYou need static content generation or server-side editor processing without client-side interactivity.RSC
Node.jsYou need backend migration, validation, or serialization scripts.Node.js

Server-only environments use base package imports like platejs and @platejs/basic-nodes. Do not import from /react subpaths in RSC or Node.js.

Next Steps

Once the editor runs, use these docs to customize it:

  • Editor explains the editor instance.
  • Plugin explains plugin configuration.
  • Plugin Components explains node and mark rendering.
  • Troubleshooting covers common setup issues.

Done. You now have the right install path for your app surface.