Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Editor API
  • Editor Transforms
  • Node
  • Element
  • Text
  • Path
  • Point
  • Range
  • Location
  • Anchor
  • Selection
  • Document Change
  • DOM API
  • React Hooks
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Editor Context
    • Plate Controller
  • Plate Utils
  • Resizable

Plate

PreviousNext

API reference for the platejs package.

platejs is the Plate distribution. Its root owns the headless Plate runtime and the document model. React, static rendering, and low-level runtime adapters use explicit subpaths.

Installation

pnpm add platejs
pnpm add platejs

Install an optional peer only for the import path that names it below. Only the React and static paths need React.

Import paths

ImportUse
OverviewEditor API

On This Page

InstallationImport pathsBase runtimeReact runtimeStatic runtimeAPI pages
Build your editor
Production-ready AI template and reusable components.
Get all-access
Optional peer
platejsHeadless editor creation, Plate plugins, editor APIs, core types, and utilities.None
platejs/reactReact editor creation, components, hooks, stores, and React plugins.React and React DOM
platejs/react/virtualizedVirtualizedEditorContent, which omits offscreen top-level blocks from the DOM.@tanstack/react-virtual, React, and React DOM
platejs/staticEditorStatic, HTML rendering, and static node renderers.React and React DOM
platejs/dom, platejs/history, platejs/hyperscriptDOM and clipboard integration, history persistence, and JSX fixtures.None
@platejs/testNode-safe editor fixtures and environment-specific test harnesses.React and Testing Library for /react; Playwright for /playwright
platejs/paginationPagination geometry and measurement.@chenglou/pretext
platejs/pagination/reactPagedEditorContent and the page layout hooks.@chenglou/pretext, React, and React DOM
platejs/diffDocument diff helpers.diff-match-patch-ts

Base runtime

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

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

React runtime

Use platejs/react for app editors.

components/basic-editor.tsx
import { EditorRoot, EditorContent, useCreateEditor } from 'platejs/react';
 
export function BasicEditor() {
  const editor = useCreateEditor({
    initialValue: [
      {
        type: 'paragraph',
        children: [{ text: 'React editor.' }],
      },
    ],
  });
 
  return (
    <EditorRoot editor={editor}>
      <EditorContent />
    </EditorRoot>
  );
}
components/basic-editor.tsx
import { EditorRoot, EditorContent, useCreateEditor } from 'platejs/react';
 
export function BasicEditor() {
  const editor = useCreateEditor({
    initialValue: [
      {
        type: 'paragraph',
        children: [{ text: 'React editor.' }],
      },
    ],
  });
 
  return (
    <EditorRoot editor={editor}>
      <EditorContent />
    </EditorRoot>
  );
}

Static runtime

To render or serialize without mounting an editable React editor, create the editor with createEditor and render it with EditorStatic or renderStaticHtml from platejs/static.

lib/editor.ts
import { createEditor } from 'platejs';
 
export const editor = createEditor({
  initialValue: [
    {
      type: 'paragraph',
      children: [{ text: 'Hello from Plate.' }],
    },
  ],
});
lib/editor.ts
import { createEditor } from 'platejs';
 
export const editor = createEditor({
  initialValue: [
    {
      type: 'paragraph',
      children: [{ text: 'Hello from Plate.' }],
    },
  ],
});

API pages

PageCovers
Plate CoreEditor creation, React runtime, plugins, stores, and render primitives.
Plate UtilitiesPlate-owned identities and utility plugins.
React UtilsReact utility hooks and helpers re-exported through platejs/react.
Plate ComponentsEditorRoot, EditorContent, EditorPreview, and component primitives.
Plate EditorRuntime editor type, core APIs, transforms, DOM state, and metadata.