Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Overview
    • Why This Fork
    • Examples
    • Installing Plite
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Canonical Change Substrate
    • Improving Performance
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Document Changes
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • Using TypeScript
    • Roots
    • Document State
    • Editing Behavior
    • Selection And DOM
    • Clipboard And Paste
    • Decorations, annotations, and widgets
    • Schema
    • Anchor API
    • Location API
    • Path API
    • PointEntry API
    • Point API
    • Range API
    • Selection API
    • Location Types APIs
    • Span API
    • Editor
    • Element API
    • NodeEntry API
    • Node API
    • Node Types APIs
    • Text API
    • Debug Value Scrubbing
    • Transforms API
    • Plite DOM
    • History Editor API
    • History Plugin Setup
    • History
    • Plite History
    • Plite Hyperscript
    • Plite PaginationExperimental
    • Annotations
    • DOM Coverage Boundaries
    • Editable Component
    • External Text Views
    • Plite React Event Handling
    • Virtualized Rendering
    • Plite React Hooks
    • React Editor Setup
    • React Editor
    • Plite React
    • Plite Component
    • Plite Yjs
    • Plite
    • Migration
    • Contributing
    • FAQ
    • Resources

Plite React

PreviousNext

Use the React editor runtime, provider, complete Editable surface, hooks, and overlays.

plitejs/react owns the React editor runtime: editor creation, the EditorRoot provider, the Editable surface, browser event handling, native selection sync, void shells, hidden DOM coverage, decorations, annotations, and external text views. Explicit large-document virtualization lives in plitejs/react/virtualized.

Start with useEditor, EditorRoot, and Editable.

Minimal usage

import { EditorRoot, Editable, useEditor } from "plitejs/react";
 
const
React EditorPlite Component

On This Page

Minimal usageStable runtime pathRuntime boundariesLarge documents
Build your editor
Production-ready AI template and reusable components.
Get all-access
Editor
=
()
=>
{
const editor = useEditor({
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
return (
<EditorRoot editor={editor}>
<Editable placeholder="Start typing..." />
</EditorRoot>
);
};
import { EditorRoot, Editable, useEditor } from "plitejs/react";
 
const Editor = () => {
  const editor = useEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <EditorRoot editor={editor}>
      <Editable placeholder="Start typing..." />
    </EditorRoot>
  );
};

Stable runtime path

  • React Editor Setup: create an editor and install the React, DOM, and clipboard plugins; install history when needed.
  • Plite Component: provide the editor, value changes, and decorations.
  • Editable Component: render content, marks, voids, placeholders, complete document DOM, and editor event handlers.
  • Event Handling: customize copy, paste, drop, keyboard, input, selection, focus, and drag behavior without replacing Plite's runtime.
  • Hooks: subscribe to editor state, runtime state, roots, mounted nodes, decorations, annotations, focus, read-only state, and selection.

Runtime boundaries

  • React Editor: DOM, focus, selection, clipboard, and React-specific editor APIs.
  • Rendering primitives EditorElement, EditorText, EditorLeaf, and EditorPlaceholder carry Plite's DOM attributes when custom renderers need to keep the native editing contract intact.
  • DOM Coverage Boundaries: represent app-hidden DOM regions for selection, copy, find, and materialization.
  • External Text Views: let an adapter own one Text's DOM and local input while Plite retains the canonical model, selection, and history.
  • Annotations: durable anchored ranges for comments, diagnostics, and external review markers.
  • Hooks: runtime/root hooks for external chrome and selection geometry for anchored UI.

Large documents

  • Virtualized Rendering: opt into viewport mounting through the dedicated plitejs/react/virtualized entrypoint.