explaingit

udecode/plate

Analysis updated 2026-06-24

16,256TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

Plate is a rich-text editor framework for React, built on Slate with a plugin system, shadcn/ui styling, and AI features for building Notion-style editors in your app.

Mindmap

mindmap
  root((plate))
    Inputs
      React app
      Plugin choices
    Outputs
      WYSIWYG editor
      Document JSON
    Use Cases
      Embed in SaaS app
      Build Notion clone
      Add AI writing
    Tech Stack
      React
      TypeScript
      Slate
      shadcn-ui
    Features
      Plugin system
      AI integration
      Templates
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a Notion-style rich-text editor to a React SaaS app

USE CASE 2

Build a custom Plate plugin for markdown shortcuts or a custom block type

USE CASE 3

Start from the Notion-like template to ship a document app with a backend

USE CASE 4

Integrate AI autocomplete and slash commands into your existing editor

What is it built with?

ReactTypeScriptSlateshadcn/ui

How does it compare?

udecode/platesteven-tey/noveltypescript-eslint/typescript-eslint
Stars16,25616,26116,244
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderateeasy
Complexity3/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Lots of optional plugin packages, so picking the right set for your use case takes some reading.

MIT license: use, modify, and distribute Plate freely, including in commercial projects, as long as you keep the copyright notice.

In plain English

Plate is an open-source rich-text editor framework for building powerful text editing experiences in web applications. Think of it as a customizable toolkit you add to your own app so users can write and format content, like a Notion-style document editor, complete with features like headings, bullet lists, images, and AI-assisted writing. The editor is a WYSIWYG tool, meaning "What You See Is What You Get": content appears formatted as you type rather than showing raw code. It supports AI features and is built with shadcn/ui, a popular collection of pre-styled interface components, which means the editor can look polished out of the box while still being fully customizable. Plate works with React (a widely used library for building web interfaces) and TypeScript, and is distributed as a set of installable packages via npm (the standard way to add code libraries to JavaScript projects). It offers a plugin system, meaning you can mix and match only the features you need, such as drag-and-drop, markdown support, or AI autocomplete, rather than including everything at once. To get started quickly, the project offers several ready-made templates: a minimal setup, a full-featured playground, and a Notion-like template with a backend included. Documentation is available at platejs.org. It is released under the MIT license, meaning it is free to use in personal or commercial projects.

Copy-paste prompts

Prompt 1
Walk me through adding the Plate editor to my Next.js app with only the plugins I need
Prompt 2
Build a custom Plate plugin that inserts a callout block via a slash command
Prompt 3
Use the Plate Notion-like template to start a docs app, then swap in my own auth and storage
Prompt 4
Wire Plate's AI plugin to my own LLM endpoint instead of the default provider

Frequently asked questions

What is plate?

Plate is a rich-text editor framework for React, built on Slate with a plugin system, shadcn/ui styling, and AI features for building Notion-style editors in your app.

What language is plate written in?

Mainly TypeScript. The stack also includes React, TypeScript, Slate.

What license does plate use?

MIT license: use, modify, and distribute Plate freely, including in commercial projects, as long as you keep the copyright notice.

How hard is plate to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is plate for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub udecode on gitmyhub

Verify against the repo before relying on details.