Plate - Plate — ContextQMD

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

bash

npm install platejs

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

Import Paths

Import	Re-exports	Use
`platejs`	`@platejs/core`, `@platejs/slate`, `@platejs/utils`, `@udecode/utils`	Headless editor creation, Slate APIs, core types, and shared utilities.
`platejs/react`	`@platejs/core/react`, `@platejs/utils/react`, `@udecode/react-hotkeys`, `@udecode/react-utils`	React editors, components, hooks, stores, plugins, and React utility hooks.
`platejs/static`	`@platejs/core/static`	Static 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.

import { createSlateEditor } from 'platejs';

export const editor = createSlateEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Headless editor.' }],
    },
  ],
});

React Runtime

Use platejs/react for app editors.

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.

tsx

import { createStaticEditor } from 'platejs/static';

export const staticEditor = createStaticEditor({
  value: [
    {
      type: 'p',
      children: [{ text: 'Static editor.' }],
    },
  ],
});

API Pages

Page	Covers
Plate Core	Editor creation, React runtime, plugins, stores, and render primitives.
Slate	Slate-compatible editor API, transforms, nodes, locations, operations, and refs.
Plate Utils	Shared non-React utilities.
React Utils	React utility hooks and helpers re-exported through `platejs/react`.
Plate Components	`Plate`, `PlateContent`, `PlateView`, and component primitives.
Plate Editor	Runtime editor type, core APIs, transforms, DOM state, and metadata.