Plate

PreviousNext

API reference for the platejs package.

platejs is the umbrella package for Plate's base, React, and static APIs. It re-exports the core runtime, Slate runtime, utilities, React helpers, and static renderer through three public subpaths.

Installation

pnpm add platejs
pnpm add platejs

platejs has React peer dependencies because the package also owns platejs/react.

Import Paths

ImportRe-exportsUse
platejs@platejs/core, @platejs/slate, @platejs/utils, @udecode/utilsHeadless editor creation, Slate APIs, core types, and shared utilities.
platejs/react@platejs/core/react, @platejs/utils/react, @udecode/react-hotkeys, @udecode/react-utilsReact editors, components, hooks, stores, plugins, and React utility hooks.
platejs/static@platejs/core/staticStatic editor creation, static rendering, HTML serialization, and static node renderers.

Use the umbrella imports in application code. Package code can import direct package surfaces such as @platejs/core/react when it needs a tighter dependency boundary.

Base Runtime

Use platejs for non-React editor work and shared types.

lib/create-headless-editor.ts
import { createSlateEditor } from 'platejs';
 
export const editor = createSlateEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Headless editor.' }],
    },
  ],
});
lib/create-headless-editor.ts
import { createSlateEditor } from 'platejs';
 
export const editor = createSlateEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Headless editor.' }],
    },
  ],
});

React Runtime

Use platejs/react for app editors.

components/basic-editor.tsx
import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
 
export function BasicEditor() {
  const editor = usePlateEditor({
    value: [
      {
        type: 'p',
        children: [{ text: 'React editor.' }],
      },
    ],
  });
 
  return (
    <Plate editor={editor}>
      <PlateContent />
    </Plate>
  );
}
components/basic-editor.tsx
import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
 
export function BasicEditor() {
  const editor = usePlateEditor({
    value: [
      {
        type: 'p',
        children: [{ text: 'React editor.' }],
      },
    ],
  });
 
  return (
    <Plate editor={editor}>
      <PlateContent />
    </Plate>
  );
}

Static Runtime

Use platejs/static for rendering or serialization paths that do not mount an editable React editor.

lib/create-static-editor.ts
import { createStaticEditor } from 'platejs/static';
 
export const staticEditor = createStaticEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Static editor.' }],
    },
  ],
});
lib/create-static-editor.ts
import { createStaticEditor } from 'platejs/static';
 
export const staticEditor = createStaticEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Static editor.' }],
    },
  ],
});

API Pages

PageCovers
Plate CoreEditor creation, React runtime, plugins, stores, and render primitives.
SlateSlate-compatible editor API, transforms, nodes, locations, operations, and refs.
Plate UtilsShared non-React utilities.
React UtilsReact utility hooks and helpers re-exported through platejs/react.
Plate ComponentsPlate, PlateContent, PlateView, and component primitives.
Plate EditorRuntime editor type, core APIs, transforms, DOM state, and metadata.