Plate

A React rich-text editor framework built on Slate, with a plugin system, AI features, and shadcn/ui components.

Framework
npm
v53.3.6
16,509stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
92/100Excellent
Development Activity100
Maintenance100
Community68
Maturity60
Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
80/100Excellent
Architecture88
Code Quality85
Innovation80
Learning Curve65

Plate (published to npm as platejs) is a React framework for building rich-text editors, built as a plugin system on top of slate-react. Rather than shipping one monolithic editor, it structures editing behavior — marks, elements, normalization, serialization, keyboard shortcuts, and more — as composable plugins, and pairs that headless core with unstyled Radix UI-based primitives and pre-built shadcn/ui components so teams can start from a fully-styled editor or build their own design system on the primitives.

The monorepo publishes dozens of scoped @platejs/* and legacy @udecode/plate-* packages (autoformat, tables, math, mentions, AI, DOCX/CSV import-export, Yjs collaboration, and more), all consolidated under the platejs package as the primary entry point going forward. With 16K+ GitHub stars and very active maintenance, it has become one of the most widely used rich-text editor frameworks in the React ecosystem, offering ready-made templates (including a Notion-like editor with AI and backend) for teams that want a production-grade starting point rather than assembling an editor from scratch.

What You Get

  • A plugin system (@platejs/core) built on slate-react where each editor behavior (marks, elements, normalization, serialization) is an independent, composable plugin
  • Dozens of official plugins covering tables, lists, math, mentions, callouts, code blocks, comments, suggestions/track-changes, DOCX/CSV/Markdown import-export, and Yjs real-time collaboration
  • AI-powered editing features (@udecode/plate-ai) for content generation and editing assistance directly inside the editor
  • Unstyled, accessible primitives built on Radix UI plus pre-built shadcn/ui components generated via the Plate CLI for a fully-styled starting point
  • Multiple starter templates (minimal, playground, and a full Notion-like editor with AI and backend) to bootstrap a project quickly

Common Use Cases

  • Building a Notion-style or Google Docs-style collaborative document editor inside a React app
  • Adding AI-assisted writing/editing features (autocomplete, rewriting, summarization) to a content editor
  • Building a CMS or admin panel’s rich-text content field with custom blocks (callouts, embeds, tables)
  • Real-time collaborative editing using the Yjs plugin, or importing/exporting content as Markdown, DOCX, or CSV

Under The Hood

Architecture — Plate’s monorepo (packages/) is organized around @platejs/core, which implements a plugin system layered on slate-react (each plugin can hook normalization, key handlers, rendering, and serialization independently), with the umbrella platejs package (packages/plate) re-exporting core plus @platejs/slate and @platejs/utils as the single recommended entry point; dozens of feature plugins (@platejs/table, @platejs/mention, @platejs/ai, @platejs/yjs, etc.) depend on this shared core and compose into an editor instance by registration rather than inheritance. Tech Stack — TypeScript/React monorepo managed with pnpm workspaces and Turborepo, built on Slate’s document model, Radix UI for headless accessible primitives, and shadcn/ui conventions for styled components generated via a dedicated Plate CLI (plate-pkg); optional plugins add dependencies for their specific feature (Yjs for collaboration, mammoth/docx libraries for Word import-export). Code Quality — The project ships .changeset-managed releases, a documented CONTRIBUTING.md, benchmarks (benchmarks/), and dedicated @platejs/test-utils/@platejs/playwright packages for testing editor plugins, reflecting a mature package-release and QA process across dozens of interdependent packages; maintenance-consistency and development-activity both score at or near the health-score maximum. API Design — Editors are assembled by composing a list of plugins into a single createPlateEditor call, so adding a feature (e.g. tables) is adding one plugin import rather than wiring up separate state/rendering/serialization code manually; the split between headless plugins and separately swappable UI components (Radix primitives vs. shadcn/ui) means teams can adopt the behavior layer without inheriting Plate’s default visual design.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search