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.
Use the shadcn CLI to add the editor UI, kits, and starter components.
Choose Next.js, React, RSC, Node.js, or manual setup.
Understand the headless plugin model before customizing behavior.
Copy a complete editor configuration and adapt it in your app.
| 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 |
| Your app | The copied component code, styling, routing, data model, and product-specific editor behavior. | Plugin Components |
Plate UI follows the shadcn/ui model: you copy the code, own it, and keep editing it in your app.
Done. You can install the full UI path, drop down to headless packages, or start from an editor template.