From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
UNPUBLISHED
  • Overview
  • Why This Fork
  • Examples
Walkthroughs
  • Installing Plite
  • Adding Event Handlers
  • Defining Custom Elements
  • Applying Custom Formatting
  • Executing Commands
  • Saving to a Database
  • Canonical Change Substrate
  • Improving Performance
Concepts
  • Interfaces
  • Nodes
  • Locations
  • Transforms
  • Document Changes
  • Commands
  • Editor
  • Extensions
  • Rendering
  • Serializing
  • Normalizing
  • Using TypeScript
  • Roots
  • Document State
  • Editing Behavior
  • Selection And DOM
  • Clipboard And Paste
  • Projection And Overlays
  • Schema
API
  • 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
Libraries
  • Plite DOM
  • History Editor API
  • History Extension Setup
  • History
  • Plite History
  • Plite Hyperscript
  • Plite Layout
  • Annotations
  • DOM Coverage Boundaries
  • Editable Component
  • Plite React Event Handling
  • Virtualized Rendering
  • Plite React Hooks
  • React Editor Setup
  • React Editor
  • Plite React
  • Plite Component
  • Plite Yjs
  • Plite
General
  • Migration
  • Contributing
  • Docs Proof Map
  • FAQ
  • Resources

Plite React

PreviousNext

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

@platejs/plite-react owns the React editor runtime: editor creation, the Plite provider, the Editable surface, browser event handling, native selection sync, void shells, hidden DOM coverage, decoration sources, annotations, widgets, and large-document DOM strategies.

Start with usePliteEditor, Plite, and Editable.

Minimal Usage

import { Plite, Editable, usePliteEditor } from "@platejs/plite-react";
 
const Editor = () => {
  const editor = usePliteEditor
React EditorPlite Component

On This Page

Minimal UsageStable Runtime PathRuntime BoundariesAdvanced Lanes
Build your editor
Production-ready AI template and reusable components.
Get all-access
({
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
return (
<Plite editor={editor}>
<Editable placeholder="Start typing..." />
</Plite>
);
};
import { Plite, Editable, usePliteEditor } from "@platejs/plite-react";
 
const Editor = () => {
  const editor = usePliteEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <Plite editor={editor}>
      <Editable placeholder="Start typing..." />
    </Plite>
  );
};

Stable Runtime Path

  • React Editor Setup: create an editor and install the React, DOM, clipboard, and history extensions.
  • Plite Component: provide the editor, value changes, decoration sources, annotation stores, and widget stores.
  • Editable Component: render content, marks, voids, placeholders, DOM strategies, 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, widgets, focus, read-only state, and selection.

Runtime Boundaries

  • React Editor: DOM, focus, selection, clipboard, and React-specific editor APIs.
  • Rendering primitives PliteElement, PliteText, PliteLeaf, and PlitePlaceholder carry Plite's DOM attributes when custom renderers need to keep the native editing contract intact.
  • DOM Coverage Boundaries: represent hidden or summarized DOM regions for selection, copy, find, and materialization.
  • Annotations: durable anchored ranges for comments, suggestions, diagnostics, and review markers.
  • Hooks: runtime/root hooks and widget hooks for external chrome and overlay UI anchored to roots, nodes, selections, and annotations. Advanced hooks include usePliteNodeRef, useDOMStrategyVirtualOffset, and usePliteRangeDecorationSource.

Advanced Lanes

  • Virtualized Rendering: large-document stress and DOM-budget work. Keep production use behind explicit product proof.