Plate

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 @tanstack/react-virtual

pnpm add platejs @tanstack/react-virtual

React is required only when importing platejs/react or platejs/static.

Import paths

Overview Editor API

On This Page

Installation Import paths Base runtime React runtime Static runtime API pages

Build your editor

Production-ready AI template and reusable components.

Import	Use	Optional peer
`platejs`	Headless editor creation, Plate plugins, editor APIs, core types, and utilities.	None
`platejs/react`	React editor creation, components, hooks, stores, and React plugins.	`@tanstack/react-virtual`, React, and React DOM
`platejs/static`	Static editor creation, HTML rendering, and static node renderers.	React and React DOM
`platejs/dom`, `platejs/history`, `platejs/hyperscript`	DOM and clipboard integration, history persistence, and JSX fixtures.	None
`@platejs/test`	Node-safe editor fixtures and environment-specific test harnesses.	React and Testing Library for `/react`; Playwright for `/playwright`
`platejs/pagination`	Pagination geometry and measurement.	`@chenglou/pretext`
`platejs/pagination/react`	React hooks for pagination geometry.	`@chenglou/pretext`, `@tanstack/react-virtual`, React, and React DOM
`platejs/diff`	Document diff helpers.	`diff-match-patch-ts`

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.' }],
    },
  ],
});

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>
  );
}

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.' }],
    },
  ],
});

Page	Covers
Plate Core	Editor creation, React runtime, plugins, stores, and render primitives.
Plate Utilities	Plate-owned identities and utility plugins.
React Utils	React utility hooks and helpers re-exported through `platejs/react`.
Plate Components	`EditorRoot`, `EditorContent`, `EditorPreview`, and component primitives.
Plate Editor	Runtime editor type, core APIs, transforms, DOM state, and metadata.