导出

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 are great for highlighting important information.

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

components/demo.tsx

'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}