# Plate review: a React rich-text framework for Notion-style editors

*Source: https://www.editorstack.cc/libraries/plate — last updated 2026-08-19. Licensed CC BY 4.0 with attribution to EditorStack.*


## Summary

- Plate is an MIT-licensed React framework for rich-text and document editing, built on Slate, shipping a large first-party plugin catalogue plus components you copy into your own repository.
- We measured @udecode/plate 48.0.5 at 150.8 kB gzip and reached a working editor in 13 lines of application code and a median of 209 ms.
- It is a document editor, not a page builder: there is no canvas, no breakpoint switching and no CSS style manager, so comparing it with GrapesJS or Puck is comparing tools for different jobs.

## Quick facts

| Fact | Value |
| --- | --- |
| Type | library |
| Licence | MIT |
| First release | 2021-07 |
| Language | TypeScript |
| Frameworks | React |
| SSR support | partial |
| Bundle (min+gzip) | 150.8 kB gzip |
| Pricing | Free (open source) |
| npm weekly downloads | 100,638 |
| GitHub stars | 16,599 |
| Latest version | 49.0.0 |
| Last verified | 2026-08-19 |
| Drag & drop canvas | Partial |
| Responsive breakpoints | No |
| Visual style manager | No |
| Custom components | Yes |
| Data binding | No |
| E-commerce blocks | No |
| Email HTML export | No |
| AI generation | Yes |
| Editor i18n | Partial |
| White label | Yes |
| Self-hosted | Yes |

## What Plate is, and who it is for

Plate exists because building a rich-text editor on Slate directly is a long project, and everyone
who does it writes the same several thousand lines. Plate is those lines, maintained, plus a plugin
system that makes the pieces composable and a component library you copy into your repository.

Its natural home is a React product that needs a serious writing surface: a documentation tool, a
knowledge base, a CRM's notes field that has outgrown a textarea, an AI writing assistant. If the
words "slash command", "mention" and "comment thread" appear in your requirements, Plate is the
shortest path among the frameworks in this dataset. [BlockNote](/libraries/blocknote) is worth a look
alongside it: it ships its slash menu and block handles already assembled rather than as components
to copy in.

It is included here because teams comparing editor libraries routinely put it on the same shortlist
as page builders, and it does not belong there. Plate has no canvas, no drag-and-drop layout, no
responsive breakpoints and no style manager. Choosing between Plate and GrapesJS is not a close call
in either direction; it is a sign the requirement has not been written down yet.

## Architecture: plugins over Slate

Slate provides the document model — a tree of nodes, normalisation rules and a transform API. Plate
wraps that with a plugin abstraction: a plugin can contribute node types, rendering, keyboard
handling, serialisation and editor behaviour, and plugins compose.

The component story is the other half. Rather than importing styled components from a package, you
copy them into your codebase in the shadcn/ui manner. That means no package boundary between you and
the editor's UI: when a toolbar needs to behave differently, you edit it.

The practical consequence is that Plate's ceiling is very high and its floor requires understanding
Slate. When something behaves unexpectedly — a paste that produces the wrong structure, a
normalisation loop — you are debugging Slate's document model, and Plate's abstractions sit on top
of that rather than replacing it.

## Getting started

From our benchmark, using the React entry point:

```jsx
import { createRoot } from 'react-dom/client';
import { Plate, PlateContent, usePlateEditor } from '@udecode/plate/react';

function App() {
  const editor = usePlateEditor({
    value: [{ type: 'p', children: [{ text: 'Hello editor' }] }],
  });
  return (
    <Plate editor={editor}>
      <PlateContent placeholder="Type here" style={{ padding: 16, minHeight: 200 }} />
    </Plate>
  );
}

createRoot(document.getElementById('app')).render(<App />);
```

![The Plate benchmark application showing a bare editable surface with placeholder text](https://www.editorstack.cc/screenshots/plate-minimal.png)

*Plate 48.0.5 from the code above — an editing surface with no toolbar, because toolbars are components you copy in.*

Median 209 ms to a rendered editor. Note that this is the bare surface: a realistic Plate editor
carries a dozen plugins and a toolbar, and both numbers on this page rise accordingly.

## Strengths

**A very high ceiling.** The plugin system reaches schema, rendering, keyboard handling and
serialisation, and components live in your repository. Few editor frameworks give you this much room
without a fork.

**A large first-party plugin catalogue.** Tables, mentions, comments, drag handles, slash commands
and AI blocks are maintained by the project rather than assembled from strangers' packages.

**Design integration is not a fight.** If you already use shadcn/ui and Tailwind, the editor arrives
speaking your design language.

**Typed throughout.** The plugin factory and editor types catch a class of mistakes that raw Slate
lets you make at runtime.

**AI features are first-class.** Streaming AI blocks are part of the maintained set rather than a
community experiment, which matters in a category where everyone is shipping AI writing this year.

## Limitations

**Frequent major versions.** Version numbers move fast, and upgrades are not always mechanical.
Budget maintenance time; do not treat the dependency as settled.

**Slate underneath, always.** When something misbehaves you need Slate's mental model. The
abstraction is good but it is not a wall, and the documentation assumes you will cross it.

**React only.** The whole plugin model is React and Slate specific.

**Heavier than the block editors.** 150.8 kB gzip against Editor.js's 64.3 kB, before plugins. If
the requirement is basic structured writing, Editor.js is a third of the weight — see
[Editor.js vs Plate](/compare/editorjs-vs-plate).

**Not a page builder.** No canvas, no breakpoints, no styling controls for end users. Do not put it
on a page-builder shortlist.

## Pricing

Free under MIT, including the plugin catalogue. Optional paid templates exist but nothing in the
core is gated. The real cost is upgrade maintenance, which for a fast-moving major-version project
is a recurring line rather than a one-time integration.

## Who it fits, and who it does not

**Good fit**

- Notion-style document editors inside a React product, with comments, mentions and slash commands
- Teams already using shadcn/ui who want editor components in the same visual language
- AI-assisted writing surfaces, since streaming AI blocks are part of the maintained plugin set

**Poor fit**

- Page building, because there is no canvas, no breakpoints and no CSS style manager
- Non-React stacks, as the whole plugin model is React and Slate specific
- Teams that need a stable public API over years, given the pace of major version releases


## Plate against its nearest neighbours

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [Plate](https://www.editorstack.cc/libraries/plate) | library | MIT | React | 150.8 kB gzip | Free (open source) | Yes | Yes | 8 |
| [BlockNote](https://www.editorstack.cc/libraries/blocknote) | library | MPL-2.0 | React, Vue | 386.1 kB gzip | from $195/mo | Yes | Yes | not scored |
| [Lexical](https://www.editorstack.cc/libraries/lexical) | library | MIT | Any (framework-agnostic) | 104.9 kB gzip | Free (open source) | Yes | Yes | 7.4 |
| [Tiptap](https://www.editorstack.cc/libraries/tiptap) | library | MIT | Any (framework-agnostic) | 123.3 kB gzip | Free tier, paid plans undisclosed | Yes | Yes | 8.3 |


## Our scores

- **developer experience: 8/10.** Plugins compose cleanly and the typed plugin factory removes most of the Slate boilerplate that makes raw Slate painful. The cost is conceptual depth: you still need to understand Slate's document model and normalisation rules when something behaves unexpectedly.
- **extensibility: 9/10.** The plugin system reaches every layer — schema, rendering, keyboard handling, serialisation — and components are copied into your repository rather than imported, so nothing is locked behind a package boundary. Few editor frameworks in this dataset give you that much room without a fork.
- **documentation: 8/10.** The site documents each plugin with a live example and the installation paths are explicit about peer dependencies. Migration guides between major versions exist but assume familiarity with what changed upstream in Slate, which slows down teams upgrading after a long gap.
- **ecosystem: 7.5/10.** A large first-party plugin catalogue covers most document-editing requirements, and the shadcn/ui alignment means design integration is rarely blocked. Third-party plugin supply is thin, so unusual requirements mean writing your own.
- **time to production: 7.5/10.** A capable editor is achievable in days if your requirements match the shipped plugins. Frequent major releases mean upgrade work is a recurring line item, which is the main thing that pushes production timelines out.


## Alternatives

- [Plate vs Editor.js](https://www.editorstack.cc/compare/editorjs-vs-plate)
- [Plate vs Lexical](https://www.editorstack.cc/compare/plate-vs-lexical)
- [Plate vs Tiptap](https://www.editorstack.cc/compare/plate-vs-tiptap)


## Frequently asked questions

### What is Plate used for?

Building Notion-style document editors inside React applications — rich text with slash commands, mentions, comments, tables and AI-assisted writing. It is the editing surface for documents, not for pages.

### How big is Plate?

We measured @udecode/plate 48.0.5 at 150.8 kB gzip (500.5 kB raw) for the editor factory alone with React external. Each plugin and each UI component you add increases that.

### Is Plate the same as Slate?

No. Slate is the underlying document model and editing core; Plate is a plugin framework, component library and set of conventions built on top of it. You still meet Slate's document model when debugging.

### Does Plate work with shadcn/ui?

Yes, that is its primary distribution model: components are copied into your repository rather than imported from a package, so you own and can modify them.

### How often does Plate break compatibility?

Major versions arrive frequently — the registry's latest tag was 49.0.0 while npm resolved 48.0.5 during our benchmark run. Treat upgrade work as a recurring line item rather than a one-off.


## Sources

1. [npm registry metadata for @udecode/plate (licence, first publish date, latest version)](https://registry.npmjs.org/@udecode/plate) — accessed 2026-08-19
2. [Plate source repository](https://github.com/udecode/plate) — accessed 2026-08-19
3. [Plate documentation](https://platejs.org/docs) — accessed 2026-08-19