Slate React

@platejs/slate-react owns the React editor runtime: editor creation, the Slate 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 useSlateEditor, Slate, and Editable.

import { Slate, Editable, useSlateEditor } from "@platejs/slate-react";
 
const Editor = () => {
  const editor = useSlateEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <Slate editor={editor}>
      <Editable placeholder="Start typing..." />
    </Slate>
  );
};Copy

import { Slate, Editable, useSlateEditor } from "@platejs/slate-react";
 
const Editor = () => {
  const editor = useSlateEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <Slate editor={editor}>
      <Editable placeholder="Start typing..." />
    </Slate>
  );
};Copy

Stable Runtime Path

• React Editor Setup: create an editor and install the React, DOM, clipboard, and history extensions.
• Slate 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 Slate'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 SlateElement, SlateText, SlateLeaf, and SlatePlaceholder carry Slate'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 useSlateNodeRef, useDOMStrategyVirtualOffset, and useSlateRangeDecorationSource.

Advanced Lanes

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