DOCSEARCHbyAlgolia
Submit Docs

Plate Rich-Text Editor Framework

repository·main·Indexed 12 days ago

https://github.com/udecode/plate

A modular rich-text editor framework built on top of slate-react. Plate provides a plugin system, unstyled Radix UI primitives, and pre-built components via shadcn/ui to enable the creation of highly customizable editors.

Tokens
503.3K
Snippets
1.2K
Records
2.5K
Agent score
94%

What's inside Plate

  1. Introduction to Plate

    main

    Plate is a React framework designed for building rich-text editors. It provides a headless editor runtime, a suite of composable plugins, and an optional UI layer called Plate UI.

    Developers can choose between two primary approaches:

    1. Headless Setup: Use the platejs core and @platejs/* plugin packages directly to build a custom editor experience without pre-defined UI.
    2. Plate UI Setup: Use the shadcn CLI to install app-local UI components, kits, and templates. This follows the shadcn/ui model where you own and customize the component code directly in your project.

  2. Overview of @platejs/markdown

    main

    The @platejs/markdown package provides bidirectional conversion between Plate's structured JSON content and Markdown strings.

    Key capabilities include:

    • Markdown to Plate JSON (Deserialization): Converts Markdown strings into editable Plate content using the deserialize method.
    • Plate JSON to Markdown (Serialization): Converts Plate content back into Markdown strings using the serialize method.
    • Extensibility: Supports custom conversion rules via rules and integrates with the remark ecosystem through remarkPlugins (e.g., GFM, Math, MDX).
    • Safety: Does not use dangerouslySetInnerHTML during conversion.
    • Round-trip Support: Uses MDX syntax to ensure custom Plate elements (like mentions or custom components) can be serialized to Markdown and deserialized back without data loss.

  3. What is Plate?

    main

    Plate is a rich text editor framework designed for simplicity and efficiency. It is built as a specialized plugin system for slate-react and consists of four main pillars:

    1. Core: The heart of Plate, providing a specialized plugin system for slate-react to keep development organized.
    2. Plugins: A rich selection of plugin packages that enhance editor behavior, hooks, serialization, and normalization.
    3. Primitives: Unstyled, accessible hooks and components built on top of Radix UI to help build custom design systems.
    4. Components: Pre-built components created using the Plate CLI and shadcn/ui that serve as a starting point for your own component library.

  5. Overview of shadcn docs style corpus

    main
    This document provides a per-file inventory of the shadcn documentation corpus as of 2026-05-31. It lists the directory structure, top MDX components, headings, and code fences used across the documentation. This inventory serves as a reference for understanding the distribution and content coverage of the shadcn documentation, including specific component pages (e.g., button.mdx, chart.mdx, sidebar.mdx) and installation guides.

  6. Overview of Plate Core

    main
    Plate Core is the foundational package of the Plate editor framework. It provides the essential structure and base logic required to build and extend a Plate-based editor. Most other Plate plugins and features build upon this core package.

  7. Install and use the Plate date plugin

    main
    The @platejs/date package provides date-related functionality and plugins for the Plate editor. It allows for handling date objects, formatting, and potentially integrating date pickers or date-specific nodes within the editor environment. For detailed implementation guides and configuration options, refer to the official Plate documentation.

  8. Understand Yjs Collaboration Test Coverage

    main

    The yjs test suite provides comprehensive coverage for collaborative editing primitives. Developers working with Yjs-based editors can refer to these test files to understand the expected behavior of core data types and synchronization logic.

    Key areas of testing include:

    • Core Data Types: Y.Array, Y.Map, Y.Text, and Y.Xml (including attribute handling and formatting).
    • Synchronization & Updates: Merging updates, handling concurrent insertions/deletions, and delta encoding.
    • Undo/Redo: Global and local scopes, handling nested undo/redo, and managing deletions within the undo stack.
    • Attribution: Managing user identity and attribution for content changes.
    • Snapshots: Creating and restoring document states.
    • Internal Structures: IdMap, IdSet, and relative position calculations.

  10. Use the Plate link plugin

    main
    The @platejs/link package provides plugin functionality for handling links within a Plate editor instance. It allows users to create, manage, and interact with hyperlinks within the document content. For detailed implementation guides and configuration options, refer to the official Plate documentation.

  11. Use the Plate Cursor Overlay

    main
    The Plate Cursor Overlay package provides a cursor overlay implementation for Plate editors. This component is typically used to visualize user cursors or selection states within the editor interface. For detailed implementation details, component props, and integration steps, refer to the official Plate documentation.