From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Plitev42
    • Editor API
    • Editor Transforms
    • Node
    • Element
    • Text
    • Path
    • Point
    • Range
    • Location
    • Location Ref
    • Document Change
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Plate Store
    • Plate Controller
  • Plate Utils
  • React Utils
  • cn
  • Floating
  • Resizable

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, Plite 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

OverviewPlite

On This Page

InstallationImport PathsBase RuntimeReact RuntimeStatic RuntimeAPI Pages
Build your editor
Production-ready AI template and reusable components.
Get all-access
Import
Re-exports
Use
platejs@platejs/core, @platejs/plite, @platejs/utils, @udecode/utilsHeadless editor creation, Plite 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, React-based HTML rendering, 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 { createBaseEditor } from 'platejs';
 
export const editor = createBaseEditor({
  initialValue: [
    {
      type: 'paragraph',
      children: [{ text: 'Headless editor.' }],
    },
  ],
});
lib/create-headless-editor.ts
import { createBaseEditor } from 'platejs';
 
export const editor = createBaseEditor({
  initialValue: [
    {
      type: 'paragraph',
      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({
    initialValue: [
      {
        type: 'paragraph',
        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({
    initialValue: [
      {
        type: 'paragraph',
        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({
  initialValue: [
    {
      type: 'paragraph',
      children: [{ text: 'Static editor.' }],
    },
  ],
});
lib/create-static-editor.ts
import { createStaticEditor } from 'platejs/static';
 
export const staticEditor = createStaticEditor({
  initialValue: [
    {
      type: 'paragraph',
      children: [{ text: 'Static editor.' }],
    },
  ],
});

API Pages

PageCovers
Plate CoreEditor creation, React runtime, plugins, stores, and render primitives.
PlitePlite-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.