Build your rich-text editor

Framework · Plugins · Components

Welcome to the Plate Playground!

Experience a modern rich-text editor built with Slate and React . This playground showcases just a part of Plate's capabilities. Explore the documentation to discover more.

Collaborative Editing

Review and refine content seamlessly. Use suggestions like this added text or to ~~mark text for removal~~. Discuss changes using comments on many text segments. You can even have overlapping annotations!

AI-Powered Editing

Boost your productivity with integrated AI SDK . Press ⌘+J or Space in an empty line to:

Generate content (continue writing, summarize, explain)

Edit existing text (improve, fix grammar, change tone)

Rich Content Editing

Structure your content with headings , lists , and quotes . Apply marks like bold, italic, underline, ~~strikethrough~~, and code . Use autoformatting for Markdown -like shortcuts (e.g., * for lists, # for H1).

Blockquotes can group paragraphs, quoted lists, and reply chains.
Markdown blockquotes keep this nested structure instead of flattening it.
Quoted list item inside the same container.
Nested blockquotes work here too.

function hello() {
  console.info('Code blocks are supported!');
}

Create links , @mention users like

Alice

, or insert emojis ✨. Use the slash command (/) for quick access to elements.

How Plate Compares

Plate offers many features out-of-the-box as free, open-source plugins.

Feature	Plate (Free & OSS)	Tiptap
AI	✅	Paid Extension
Comments	✅	Paid Extension
Suggestions	✅	Paid (Comments Pro)
Emoji Picker	✅	Paid Extension
Table of Contents	✅	Paid Extension
Drag Handle	✅	Paid Extension
Collaboration (Yjs)	✅	Hocuspocus (OSS/Paid)

Images and Media

Embed rich media like images directly in your content. Supports Media uploads and drag & drop for a smooth experience.

sample.pdf

Dates and Equations

Insert dates like

January 15, 2024

or use inline equations:

﻿

Callouts and Toggles

This is a callout block for important information.

Multi-column Layout

First column content. Great for side-by-side comparisons.

Second column content. Layout flexibility at its best.

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
        -int sizeInFeet
        -canEat()
      }
      class Zebra{
        +bool is_wild
        +run()
      }

Rendering...