Command Palette

Search for a command to run...

Introduction

The rich-text editor framework for React.

Plate is a powerful toolkit that makes it easier for you to develop with Slate, a popular framework for building text editors. Plate is designed with principles of Openness, Composition, and Headless through its ecosystem.

It focuses on three main areas: Core Engine, Extensible Plugins, and Customizable Components (Plate UI).

Core Engine

The heart of Plate is its plugin system, designed for React, with support for server-side rendering. This allows you to understand and extend the editor's foundation. It helps keep your project organized and efficient by separating different functionalities. It also includes a framework agnostic API, allowing for server-side rendering and non-React usage.

Extensible Plugins

Plate offers a wide range of plugin packages that enhance the behavior, hooks, serialization, normalization, and other features of the editor. These plugins are "headless" (unstyled by default) and designed for Composition, allowing you to mix and match functionalities to build a tailored editing experience. The plugin system includes:

  • State Management: Each plugin can have its own Zustand store.
  • Shortcuts: Define custom hotkeys for each plugin.
  • API and Transforms: Plugins can define their own API methods and transforms, accessible through editor.api and editor.transforms.
  • TypeScript: Powerful type inference for both plugins and editor, enhancing developer experience and AI-readiness of your codebase.

Customizable Components

To accelerate development with a visually appealing interface and pre-configured functionality, Plate provides Plate UI. This is a collection of resources, available via our CLI and an MCP-enabled registry, that you can integrate into your project.

Plate UI includes:

  • UI Components: Pre-built, styled components for editor elements (toolbars, blocks, marks, etc.), built on shadcn/ui and Radix UI.
  • Editor Blocks: Full editor configurations (e.g., editor-ai – a complete AI-powered editor setup) that you can use as a starting point.
  • Individual Plugins: Configured plugins ready to be integrated.

Following an Open Code model inspired by shadcn/ui, you copy the code for these resources into your project, giving you full ownership.

  • Own Your Code: Modify and extend any resource directly.
  • Beautiful & Functional Defaults: Start with a polished look and working editor configurations.
  • AI-Ready: MCP and our open code make these resources transparent for AI tools to assist with customization, integration, and generation. Learn more about MCP.
  • Distribution via CLI: Easily add Plate UI resources to your project.

These resources can be used as a reference or starting point for your own editor builds and component libraries, enabling you to create unique, accessible, and visually pleasing user interfaces and experiences.

FAQ

Credits

  • shadcn/ui - For the UI inspiration for Plate UI, and the docs.
  • Radix UI - For the primitives.
  • Vercel - For hosting.
  • Shu Ding - The typography style is adapted from his work on Nextra.
  • cmdk - For the <Command /> component used in Plate UI.
Getting Started