Plate.js

Overview

Plate.js is an enterprise-grade rich text editor framework built on top of Slate and React. Offering complete copy-paste shadcn/ui integration, Plate.js provides over 50 battle-tested plugins—including AI copilot completions, inline comments, drag-and-drop block handles, Notion-style slash commands, tables, and mathematical equations.

Key Features

• 🧩 50+ Plug-and-Play Plugins: Out-of-the-box support for tables, callouts, code sandboxes, mentions, image uploads, and Markdown shortcuts.
• 🤖 Native AI Copilot Integration: Seamlessly incorporate inline LLM text generation, autocomplete, translation, and tone rewriting.
• 🎨 shadcn/ui-Native Styling: Fully styled with Tailwind CSS and Radix UI components, allowing effortless custom theming in your existing design system.
• 📦 Copy-Paste Distribution via CLI: Add editor plugins and components directly into your codebase using standard CLI tools.

Installation & Quick Start

# Initialize Plate with shadcn/ui components
npx @udecode/plate-ui@latest init

import React from 'react';
import { createPlateEditor, Plate, PlateContent } from '@udecode/plate/react';
import { EditorContainer } from '@/components/plate-ui/editor';

export function RichEditor() {
  const editor = createPlateEditor();

  return (
    <Plate editor={editor}>
      <EditorContainer className="rounded-xl border border-neutral-200 dark:border-neutral-800 p-4 min-h-[350px]">
        <PlateContent placeholder="Type '/' for commands or ask AI..." />
      </EditorContainer>
    </Plate>
  );
}

Why Choose Plate.js?

• Notion & Linear Style Editors: The most comprehensive React ecosystem for building block-based and document-style editor experiences.
• Tailwind & shadcn Native: Eliminates the pain of restyling legacy WYSIWYG editors by adopting standard Tailwind utility components.