4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1252,--- title: Introduction description: 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 ## What Plate Owns | Layer | What it owns | Start here | | --- | --- | --- | | `platejs` | Core editor runtime, React bindings, and editor APIs. | [Installation](/docs/installation) | | `@platejs/*` packages | Headless plugins for nodes, marks, serialization, collaboration, AI, and editor behavior. | [Plugin guide](/docs/plugin) | | Plate UI registry | App-local UI components, kits, editor templates, and API routes installed through the shadcn CLI. | [Plate UI](/docs/installation/plate-ui) | | Your app | The copied component code, styling, routing, data model, and product-specific editor behavior. | [Plugin Components](/docs/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](/docs/installation/mcp) 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. ## FAQ Plate works in React environments. Use the [Next.js guide](/docs/installation/next) for server-rendered apps, the [React guide](/docs/installation/react) for Vite and client-side apps, [RSC](/docs/installation/rsc) for server components, and [Node.js](/docs/installation/node) for backend-only processing. **Plate** is the headless editor framework: runtime, plugins, transforms, APIs, and React bindings. **Plate UI** is the copied UI layer: components, kits, editor templates, and API routes installed into your app. Yes. Plate and Plate UI are free for personal and commercial projects. Attribution is not required. No. Plate UI uses [shadcn/ui](https://ui.shadcn.com/) conventions for editor-specific UI. Use shadcn/ui for the rest of your application. Package behavior updates through `platejs` and `@platejs/*` dependencies. Copied UI code is yours, so update it by comparing the Plate registry source with your local files or by using the [MCP setup](/docs/installation/mcp). The copied component layer lets you change markup, styles, toolbar behavior, and product details without waiting for a package API to expose every option. No. Plate UI is distributed as registry code through the shadcn CLI so the UI layer stays owned by your app. ## Credits - [shadcn/ui](https://ui.shadcn.com/) - For UI inspiration, documentation, and the CLI. - [Radix UI](https://radix-ui.com) - For the unstyled, accessible primitives. - [Vercel](https://vercel.com) - For hosting. - [Shu Ding](https://shud.in) - Typography style adapted from [Nextra](https://nextra.site). - [cmdk](https://cmdk.paco.me) - For the `` component. 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/index.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/index.mdx"}],"className":"h-[70svh] min-h-80"}]]}]