Plate components connect a PlateEditor to React rendering. Use Plate and PlateContent for editable editors, PlateView for read-only static views, and the node primitives when writing custom plugin components.
Editable Editor
Plate owns the editor store. PlateContent renders the editable surface under that store.
import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
export function Editor() {
const editor = usePlateEditor({
value: [
{
children: [{ text: 'Start writing.' }],
type: 'p',
},
],
});
return (
<Plate editor={editor}>
<PlateContent placeholder="Write..." />
</Plate>
);
}import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
export function Editor() {
const editor = usePlateEditor({
value: [
{
children: [{ text: 'Start writing.' }],
type: 'p',
},
],
});
return (
<Plate editor={editor}>
<PlateContent placeholder="Write..." />
</Plate>
);
}PlateContent must render below Plate. Hooks such as useEditorRef,
useEditorReadOnly, and usePlateStore throw when there is no Plate or
PlateController above them.
Read-Only View
Use PlateView with a static editor when you need rendered content and Plate copy behavior without an editable surface.
import { PlateView, usePlateViewEditor } from 'platejs/react';
const value = [
{
children: [{ text: 'Published content.' }],
type: 'p',
},
];
export function ReadOnlyEditor() {
const editor = usePlateViewEditor({ value });
if (!editor) return null;
return <PlateView editor={editor} />;
}import { PlateView, usePlateViewEditor } from 'platejs/react';
const value = [
{
children: [{ text: 'Published content.' }],
type: 'p',
},
];
export function ReadOnlyEditor() {
const editor = usePlateViewEditor({ value });
if (!editor) return null;
return <PlateView editor={editor} />;
}PlateView wraps PlateStatic. Its default onCopy writes Plate fragment data to the clipboard, unless you pass your own onCopy prop.
Component Map
| Component | Use For |
|---|---|
Plate | Store provider for one editor instance. |
PlateContent | Editable Slate surface with plugin handlers, decorators, renderers, hotkeys, and editor effects. |
PlateView | Static read-only rendering with Plate fragment copy support. |
PlateContainer | Editor container div plus beforeContainer and afterContainer plugin slots. |
PlateSlate | Slate provider wrapper used by PlateContent; also applies aboveSlate plugin wrappers. |
PlateElement | Default element renderer for block and inline elements. |
PlateLeaf | Default decorated text-leaf renderer. |
PlateText | Default text-node renderer for non-decoration leaf rendering. |
ContentVisibilityChunk | Default chunk renderer when chunking uses content-visibility: auto. |
PlateTest | Test helper that creates or wraps an editor and renders PlateContent with test attributes. |
Render Pipeline
PlateContent builds the editable props with useEditableProps. That pipeline combines store-level renderers, PlateContent render props, plugin decorators, plugin DOM handlers, and chunking.
| Stage | Source |
|---|---|
| Slate provider | PlateSlate uses editor.children, editor.meta.key, and store callbacks. |
| Editable props | useEditableProps pipes decorators, DOM handlers, renderChunk, renderElement, renderLeaf, and renderText. |
| Plugin slots | beforeEditable, aboveEditable, and afterEditable wrap or sit around the editable surface. |
| Effects | EditorMethodsEffect, EditorHotkeysEffect, EditorRefEffect, and PlateControllerEffect run inside PlateContent. |
| Read-only state | disabled forces read-only; readOnly syncs back into the Plate store. |
Node Primitives
Use PlateElement, PlateLeaf, and PlateText inside plugin components. They merge Slate attributes with your className, style, and ref.
import { PlateElement, type PlateElementProps } from 'platejs/react';
export function ParagraphElement(props: PlateElementProps) {
return <PlateElement as="p" className="leading-7" {...props} />;
}import { PlateElement, type PlateElementProps } from 'platejs/react';
export function ParagraphElement(props: PlateElementProps) {
return <PlateElement as="p" className="leading-7" {...props} />;
}| Primitive | Behavior |
|---|---|
PlateElement | Adds data-slate-node="element", preserves inline metadata, sets data-block-id for mounted block elements with an id, and adds directional-affinity spacers when needed. |
PlateLeaf | Renders a text leaf and adds hard-affinity spacers when needed. |
PlateText | Renders a text node without leaf-decoration matching. |
useNodeAttributes | Merges Slate attributes, refs, class names, and styles for node primitives. |
API Reference
Plate
Root provider for one editor instance.
Editor instance. When null, Plate renders nothing.
React children that can read the Plate store.
Store-level decorate function used by PlateContent.
Store-level read-only state. Defaults to editor.dom.readOnly.
Registers the editor as a primary editor for PlateController.
Fallback element renderer stored on the Plate store.
Fallback leaf renderer stored on the Plate store.
Runs after Slate change handling when plugin onChange handlers do not handle the event.
Runs when Slate reports a value change.
Runs when Slate reports a selection change.
Stored on SlateExtensionPlugin by PlateContent and called for node operations.
Stored on SlateExtensionPlugin by PlateContent and called for text operations.
Suppresses the multiple-instance warning from usePlateInstancesWarn.
PlateContent
Editable surface for a Plate editor.
Editor scope used by useEditorRef(id) and usePlateStore(id).
Focuses the editor at the end when readOnly changes from true to false.
Forces read-only state and sets aria-disabled.
Overrides the store read-only value and syncs it back to the store.
Editable-level decorate function. Store-level decorate wins when present.
Wraps or replaces the generated Editable element.
Custom chunk renderer. Defaults to ContentVisibilityChunk when chunking enables contentVisibilityAuto.
Fallback element renderer after plugin renderers.
Fallback leaf renderer after plugin leaf renderers.
Fallback text renderer after non-decoration text renderers.
Placeholder renderer passed to Slate Editable.
Placeholder text passed to Slate Editable.
Slate selection scrolling hook.
DOM before-input handler passed through the plugin handler pipeline.
Keyboard handler passed through the plugin handler pipeline.
Element type passed to Slate Editable.
Passed to Slate Editable.
ARIA role passed to Slate Editable.
Style object passed to Slate Editable.
PlateContent also accepts the DOM handler props listed in DOMHandlers, including clipboard, composition, focus, keyboard, pointer, mouse, drag, touch, media, and form handlers.
PlateView
Read-only static renderer with Plate copy support.
PlateContainer
Container div with plugin container slots.
Render Primitives
| API | Default Element | Notes |
|---|---|---|
PlateElement | div | Accepts as, attributes, className, style, ref, element, path, editor, plugin, and insetProp. |
PlateLeaf | span | Accepts as, attributes, className, style, ref, leaf, text, editor, plugin, and inset. |
PlateText | span | Accepts as, attributes, className, style, ref, text, editor, and plugin. |
ContentVisibilityChunk | div | Wraps children only when lowest is true. |
withHOC | React.forwardRef | Wraps one ref-capable component with another ref-capable component. |