Plate Editor

PlateEditor is the React editor type returned by createPlateEditor, usePlateEditor, and withPlate. It extends the base Plite editor with plugin registries, typed api, typed editor.update() transactions, DOM state, metadata, and plugin option helpers.

Ownership

Use PlateEditor when a page or component runs inside React. Use BaseEditor when you need the headless editor from createBaseEditor.

Editor Shape

The editor is still a Plite editor. Plate adds typed plugin access, plugin metadata, DOM state, and option stores on top of that shape.

Runtime State

React and DOM runtime state is read through Plite runtime APIs. Plate keeps plugin metadata on editor.runtime.

editor.runtime carries plugin resolution output. Most application code reads this indirectly through helpers like getPlugin, getOptions, and render utilities.

Plugin Access

Use editor helpers when you need the resolved plugin instance or live plugin options. Read plugin APIs from editor.api; run plugin commands through editor.update.

import { ParagraphPlugin, useEditorPlugin } from 'platejs/react';
 
export function ParagraphType() {
  const { editor } = useEditorPlugin(ParagraphPlugin);
 
  return <span>{editor.getType(ParagraphPlugin.key)}</span>;
}Copy

import { ParagraphPlugin, useEditorPlugin } from 'platejs/react';
 
export function ParagraphType() {
  const { editor } = useEditorPlugin(ParagraphPlugin);
 
  return <span>{editor.getType(ParagraphPlugin.key)}</span>;
}Copy

Initialization

withPlate wraps withPlite with React defaults. It uses createZustandStore for plugin option stores and prepends the React core plugins before user plugins.

import { usePlateEditor } from 'platejs/react';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
export function useBasicEditor() {
  return usePlateEditor({
    plugins: [BoldPlugin],
    value: [
      {
        type: 'p',
        children: [{ text: 'Bold text is ready.' }],
      },
    ],
  });
}Copy

import { usePlateEditor } from 'platejs/react';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
export function useBasicEditor() {
  return usePlateEditor({
    plugins: [BoldPlugin],
    value: [
      {
        type: 'p',
        children: [{ text: 'Bold text is ready.' }],
      },
    ],
  });
}Copy

withPlite does the lower-level setup:

value accepts a Plate value, an HTML string, or a function that returns the value. onReady receives { editor, isAsync, value } after initialization completes.

Core APIs

These APIs exist on every Plate editor because core plugins are always resolved before user plugins.

Core Transactions

Mutations run through editor.update. Core Plite commands live on the transaction object, and plugin commands are added by extendTx or extendTxGroup.

Plugin Pipeline Effects

Some core behavior is exposed by routing browser/editor events into the Plite transaction runtime rather than by adding public editor methods.

Type Helpers

Use PlateEditor when you want an editor typed to a specific value and plugin union.

import type { PlateEditor } from 'platejs/react';
import type { Value } from 'platejs';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
type BasicEditor = PlateEditor<Value, typeof BoldPlugin>;Copy

import type { PlateEditor } from 'platejs/react';
import type { Value } from 'platejs';
import { BoldPlugin } from '@platejs/basic-nodes/react';
 
type BasicEditor = PlateEditor<Value, typeof BoldPlugin>;Copy

Related APIs

• Plate components covers Plate, PlateContent, PlateView, and component-layer runtime effects.
• PlateController covers active, primary, and fallback editor lookup.
• Plate plugin covers plugin configuration, methods, options, handlers, and render hooks.
• Controlled Value covers React-owned value patterns around editor.update.