Introduction - Plate

Plate is a comprehensive toolkit designed to simplify the development of rich-text editors in React. It's built on the principles of Openness, Composition, and Headless architecture.

Plate empowers you through three core pillars:

Core Engine: A robust, React-focused plugin system with SSR support and a framework-agnostic API. It promotes modularity and extensibility.
Extensible Plugins: A wide list of headless plugins to enhance editor behavior, hooks, serialization, and normalization. Compose them to build your ideal editing experience.
Plate UI: Customizable components to accelerate your UI development with beautiful, pre-configured defaults.

Why Plate UI?

Traditional component libraries often lead to compromises: overriding styles, wrapping components, or mixing incompatible APIs. Plate UI offers a different approach:

It's not just a component library; it's how you build your component library.

Open Code: Modify every aspect of the component code. No more fighting with vendor styles. If you need a change, edit the code directly.
Composition: Components share a common, composable interface, compatible with shadcn/ui. Predictable for your team and for AI.
Distribution via CLI: Leverage the shadcn CLI to add components. Host your own registry if needed.
Beautiful Defaults: Get a clean, minimal, and consistent UI out-of-the-box. Easy to extend and customize.
AI-Ready & MCP-Ready: Open code and consistent APIs make components understandable by AI. MCP (Model Context Protocol) compatibility facilitates AI-assisted component management and updates. Learn more about our MCP server.

Plate UI includes:

UI Components: Pre-built, styled components for editor elements (toolbars, blocks, marks), built on shadcn/ui and Radix UI.
Editor Blocks: Full editor configurations (e.g., editor-ai) as starting points.
Individual Plugins: Configured plugins ready for integration.

Inspired by shadcn/ui, you own the code you integrate, giving you complete control.

FAQ

<Accordions> <Accordion title="Which frameworks are Plate compatible with?"> Plate's core engine and plugin system, built with [Slate](https://www.npmjs.com/package/slate) and [Slate React](https://www.npmjs.com/package/slate-react), are compatible with any React environment. Plate UI components, being React-based, work seamlessly with frameworks like [Next.js](/docs/installation-nextjs), [Vite](/docs/installation-vite), [Remix](/docs/installation-remix), and others. </Accordion> <Accordion title="What's the difference between Plate and Plate UI?"> **Plate** is the foundational rich-text editor framework. It provides the core engine, plugin system, and headless functionalities for building advanced text editors with Slate.

**Plate UI** is a curated collection of pre-styled, customizable UI components, editor blocks (templates), and plugins designed to work with the Plate framework. Following the shadcn/ui philosophy, you copy the code into your project, gaining full ownership and control over the UI and core configuration of your Plate editor.

</Accordion> <Accordion title="Can I use Plate / Plate UI in my project?"> Yes. Plate (both the core framework and Plate UI) is free for personal and commercial projects. No attribution is required, but we appreciate you sharing your editor app [here](https://github.com/udecode/plate/discussions/2523)! </Accordion> <Accordion title="Is Plate UI a replacement for shadcn/ui?"> No. Plate UI extends [shadcn/ui](https://ui.shadcn.com/) and [Radix UI](https://www.radix-ui.com/), offering components specifically for rich-text editor design. For other application parts, continue using shadcn/ui or other libraries. Plate UI follows the same conventions, ensuring seamless integration. </Accordion> <Accordion title="How do I manage updates with an Open Code approach?"> Plate UI's core functionalities receive updates via dependency management. The UI layer (the code you copy) is yours to modify. For updates to this layer, you can manually compare and integrate changes from the Plate UI source.

MCP compatibility also allows AI tools to assist in pulling, merging, and applying updates from the Plate registry.

</Accordion> <Accordion title="Why copy/paste components instead of using an npm package?"> This approach gives you full ownership and control over the component code, aligning with our "Open Code" principle. You start with sensible defaults and customize components to your exact needs, separating design from implementation. </Accordion> <Accordion title="Will Plate UI be published as an npm package?"> No. To maintain the "Open Code" philosophy and provide you with maximum control, we have no plans to publish Plate UI as an npm package. </Accordion> </Accordions>

Credits

shadcn/ui - For UI inspiration, documentation, and the CLI.
Radix UI - For the unstyled, accessible primitives.
Vercel - For hosting.
Shu Ding - Typography style adapted from Nextra.
cmdk - For the <Command /> component.