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 focuses on four main areas: Core, Plugins, Primitives and Components.

Core

The heart of Plate is its plugin system, designed for both slate and slate-react, with support for server-side rendering. It helps keep your project organized and efficient by separating different functionalities and keeping things clean. The core functionality is available in vanilla JavaScript, allowing for server-side rendering and non-React usage.

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," meaning they are unstyled by default. The plugin system includes:

  • State Management: Each plugin has 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.

Primitives

In addition to plugins, Plate provides unstyled and accessible components based on Radix UI. These components serve as the foundation for building high-quality design systems.

Components

To help you get started with a visually appealing interface, Plate offers pre-built styled components you can own using our CLI. These components, based on shadcn/ui, can be used as a reference or starting point for your own component library, enabling you to create a unique, accessible, and visually pleasing user interface.

FAQ

Credits

  • shadcn/ui - For the UI, the docs and the CLI.
  • 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.
Getting Started