Introduction
Build rich-text editors with Plate, Plate UI, AI, MCP, and shadcn/ui.
Plate is a React framework for building rich-text editors. It gives you a headless editor runtime, composable plugins, and optional Plate UI components that you copy into your app. Start with Plate UI for a complete editor, or use the packages directly when you need a headless setup.
Choose a Path
Install Plate UI
Use the shadcn CLI to add the editor UI, kits, and starter components.
Pick an install guide
Choose Next.js, React, RSC, Node.js, or manual setup.
Learn plugins
Understand the headless plugin model before customizing behavior.
Start from a template
Copy a complete editor configuration and adapt it in your app.
What Plate Owns
| Layer | What it owns | Start here |
|---|---|---|
platejs | Core editor runtime, React bindings, and editor APIs. | Installation |
@platejs/* packages | Headless plugins for nodes, marks, serialization, collaboration, AI, and editor behavior. | Plugin guide |
| Plate UI registry | App-local UI components, kits, editor templates, and API routes installed through the shadcn CLI. | Plate UI Installation |
| Your app | The copied component code, styling, routing, data model, and product-specific editor behavior. | Plugin Components |
Why Plate UI?
Plate UI follows the shadcn/ui model: you copy the code, own it, and keep editing it in your app.
- Open code: The UI layer is app-local code, not a sealed component package.
- Composition: Components use predictable React and shadcn/ui conventions.
- CLI distribution: Add kits, templates, components, API routes, and docs through the shadcn CLI.
- AI-ready: Open component code and consistent registry metadata give agents real context.
- MCP-ready: The MCP setup lets AI tools inspect and apply Plate registry items.
Done. You can install the full UI path, drop down to headless packages, or start from an editor template.