Plate Components

PreviousNext

API reference for Plate component.

Plate is the root component loading the editor state into a store provider.

PlateContent is the component that renders the editor.

<Plate>

Props

Collapse all

    Children components have access to the plate store.

    A controlled editor instance. This prop is required.

    See Slate docs.

    Controlled callback called when the editor state changes.

    Callback called when the editor selection changes.

    Callback called when the editor value changes.

    Callback called whenever a node operation occurs (insert, remove, set, merge, split, move).

    Parameters:

    • editor: The Plate editor instance
    • node: The node after the operation
    • operation: The node operation that occurred
    • prevNode: The node before the operation

    Note: For insert_node and remove_node operations, both node and prevNode contain the same value to avoid null cases.

    Callback called whenever a text operation occurs (insert or remove text).

    Parameters:

    • editor: The Plate editor instance
    • node: The parent node (block or inline element) containing the text that changed
    • operation: The text operation that occurred (insert_text or remove_text)
    • prevText: The text content before the operation
    • text: The text content after the operation

    Controls whether the editor is considered active by default when used with a PlateController.

    • Default: true

    If true, the editor is in read-only mode.

    Custom render function for elements.

    Custom render function for leaf nodes.

<PlateContent>

Props for the Editable component. Extends TextareaHTMLAttributes<HTMLDivElement>.

Props

Collapse all

    Automatically focus the editor when it transitions from read-only to editable mode (when readOnly changes from true to false).

    Custom Editable node.

    • Default: <Editable {...props} />

How Plate Works

Plate requires an editor prop, which should be an instance of PlateEditor. If editor is null, Plate will not render anything.

The Plate component does not handle the creation of the editor or the management of plugins. These responsibilities are handled by createPlateEditor.

Plate provides a store for the editor state and renders its children. It uses PlateStoreProvider to make the editor state and related functions available to its children components.

The rendering logic for elements and leaves is primarily handled by the plugins system, with renderElement and renderLeaf props serving as fallbacks if no plugin is found for a specific node type.

For more details on creating and configuring the editor, refer to the Editor Configuration guide.

OperationPlate Editor