What Is Slate and How Does It Relate to Plate for Building Rich-Text Editors?

Slate is a headless rich-text editor framework for React: it gives you the document model and editing operations, but no UI. Plate is a plugin and component layer built on top of Slate that adds ready-made editing behavior and styled components. Choose Slate directly when you need full control over every interaction and are willing to build the interface yourself; choose Plate when you want a working editor faster and are comfortable adopting its plugin conventions.

What Slate provides

Slate is the foundation layer. It handles the parts of rich text that are tedious to get right:

• A document model — content is stored as a JSON tree of nodes (blocks, inlines, text) rather than raw HTML, so you can query and transform it programmatically.
• Editing operations — inserting, splitting, merging, and moving nodes through a defined set of transforms.
• Selection and normalization — tracking cursor and range state, and enforcing rules about what structures are valid.
• React rendering primitives — components and hooks that connect the editor state to your React tree.

What it deliberately does not include: toolbars, buttons, keyboard shortcuts for bold or links, markdown-style input rules, or any visual styling. Those are left to you.

What Plate adds on top

Plate takes Slate's core and packages the common editor features as plugins and components. From the project's own description, it is "a set of beautifully-designed, customizable plugins and components to help you build your rich-text editor," distributed as open source.

In practice that means:

• Plugin input rules — typing patterns that transform text as you type, so you don't implement them per project.
• Prebuilt components — editor UI pieces you can drop in rather than authoring from scratch.
• Styling integrations — the stack is built around Tailwind CSS, Radix UI, and shadcn/ui, so the components fit projects already using those tools.
• A scaffolding command — the site shows npx shadcn@latest add @plate/editor-ai as a way to pull an editor into a project, including an AI editor example.

Slate directly vs. Plate: the trade-off

The decision is control versus convenience. If your editor's behavior is unusual enough that existing plugins would fight you, Slate alone avoids that friction. If your needs are conventional — formatting, links, lists, embedded blocks — Plate's plugins cover most of it and you spend your time on product-specific features instead.

The typical stack around them

Both sit inside a React application. Plate's ecosystem assumes Tailwind CSS for styling, Radix UI for accessible primitives, and shadcn/ui for component patterns. Next.js appears in the project's keyword set, so it's a common host framework, but nothing in the description restricts Plate to Next.js — it's a React library.

If your project already uses Tailwind and shadcn/ui, Plate's components will look and behave consistently with the rest of your app. If you use a different styling approach, you can still use Slate directly, or use Plate and restyle.

Getting started with Plate

1. Confirm prerequisites — a React project, and ideally Tailwind CSS plus shadcn/ui set up, since Plate's components are built for that stack.
2. Add the editor — run the scaffolding command shown on the site: npx shadcn@latest add @plate/editor-ai. This pulls editor code into your project rather than installing an opaque dependency.
3. Render it — mount the generated editor component in a page and confirm you can type, select, and apply basic formatting.
4. Extend with plugins — add the plugins you need for your use case, and check the input rules that come with them.
5. Verify behavior — test the specific interactions your users will perform, since plugin defaults may not match your expectations.

Where Slate concepts still matter

Even when you use Plate, you're working with Slate underneath. When a plugin doesn't do exactly what you want, you'll be reading and writing Slate transforms, inspecting the node tree, and reasoning about selection and normalization. Learning Slate's document model is not wasted effort if you start with Plate — it's the layer you drop into when the convenient path runs out.

A practical rule: start with Plate if your editor is a means to an end, and start with Slate if the editor itself is the product.