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.
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-uipnpm dlx shadcn@latest add @plate/plate-uiPick the Runtime Guide
After Plate UI is installed, choose the runtime guide that matches your app:
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
| Environment | Use it when | Guide |
|---|---|---|
| Manual React | You do not want Plate UI or shadcn/ui. | Manual Installation |
| React Server Components | You need static content generation or server-side editor processing without client-side interactivity. | RSC |
| Node.js | You 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.