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

Plite

PreviousNext

API reference for @platejs/plite.

@platejs/plite is the framework-free editor runtime. It owns document values, roots, canonical document changes, schema extensions, state fields, read APIs, transaction groups, and pure node/location helper namespaces.

Installation

pnpm add @platejs/plite
pnpm add @platejs/plite

Use @platejs/plite in package code that should not import React or Plate core. Framework packages such as @platejs/plite-react and @platejs/core/react mount this runtime instead of replacing it.

Quick Use

PlateEditor API

On This Page

InstallationQuick UsePackage SurfaceEditor ShapeAPI MapHistoryExtension AuthoringHelper NamespacesRelated APIs
Build your editor
Production-ready AI template and reusable components.
Get all-access
Create a framework-free editor
import { createEditor } from "@platejs/plite";
 
const editor = createEditor({
  initialValue: [{ children: [{ text: "Hello" }], type: "paragraph" }],
  maxLength: 1000,
});
 
editor.update((tx) => {
  tx.text.insert(" world");
});
 
const text = editor.read((state) => state.text.string([]));
Create a framework-free editor
import { createEditor } from "@platejs/plite";
 
const editor = createEditor({
  initialValue: [{ children: [{ text: "Hello" }], type: "paragraph" }],
  maxLength: 1000,
});
 
editor.update((tx) => {
  tx.text.insert(" world");
});
 
const text = editor.read((state) => state.text.string([]));

createEditor returns an editor with explicit read(...) and update(...) boundaries. Reads observe committed state. Writes run inside transaction groups. maxLength caps user-facing insertions without changing imported document changes.

Package Surface

SurfaceExportUse
Editor factorycreateEditorCreates a framework-free Plite editor.
Runtime viewscreateEditor, createEditorViewCreate one committed editor and optional root-scoped views.
Editor typesEditor, BaseEditor, Value, InitialValue, Selection, ValueOfType editor instances, document values, and selection state.
Read APIEditorStateView, EditorStateValueApi, EditorStateSelectionApi, EditorStateTextApiRead committed state inside editor.read(...).
Transaction APIEditorUpdateTransaction, EditorTransactionValueApi, EditorTransactionNodesApi, EditorTransactionSelectionApiMutate editor state inside editor.update(...).
InterfacesElementApi, NodeApi, TextApi, PathApi, PointApi, RangeApiTyped helpers for Plite data structures.
AnchorsAnchor, editor.anchor, tx.anchorKeep paths, points, and ranges mapped through document changes.
ExtensionsdefineExtension, defineEditorSchema, defineStateField, property, schemaRegister schema facts, owner-local reads and updates, corrections, commands, read middleware, and lifecycle hooks.
Dependency referencesEditorExtensionDependencyReferenceDescribe one shallow extension identity with name and optional enabled; capability/provider compiler types stay under @platejs/plite/internal.
Value codecsdefineValueCodec, valueCodecs, encodeEditorEffect, decodeEditorEffectVersion persisted fields and keyed shared effects.

Editor Shape

An Editor exposes committed state through explicit read and update entrypoints.

FieldTypeUse
apiReadonly<EditorCoreApiGroups & EditorInstalledApiGroups>Access installed runtime services.
idstringIdentify the logical editor instance.
extend(extension) => () => voidInstall an extension and return its cleanup function.
extension(descriptor) => EditorExtensionPortalRead one installed descriptor's typed runtime API.
readEditorRead<Value, TExtensions>Run direct or grouped committed-state reads.
subscribe(listener) => () => voidObserve snapshots and optional commits.
subscribeCommit(listener) => () => voidObserve committed changes.
updateEditorUpdate<Value, TExtensions>Run direct, configured direct, or atomic model writes.

API Map

PageCovers
Editor APIRead methods on editor.read(...) state groups.
Editor TransformsTransaction methods on editor.update(...) tx groups.
NodeNode, descendant, ancestor, and node-entry helpers.
ElementElement types, element props, and element guards.
TextText node types, mark objects, and text guards.
PathPath comparison, movement, ancestry, and transform helpers.
PointPoint comparison, edge checks, and point transforms.
RangeRange checks, edge helpers, intersection, inclusion, and transforms.
LocationPath, Point, Range, and Span location unions.
AnchorRoot-aware live paths, points, and ranges.
Document changesSerialize and apply canonical DocumentChange values.

History

Batch history
editor.update({ history: "new-batch" }, (tx) => {
  tx.text.insert("Title");
  tx.break.insert();
});
 
editor.update({ history: "skip" }).selection.set([]);
Batch history
editor.update({ history: "new-batch" }, (tx) => {
  tx.text.insert("Title");
  tx.break.insert();
});
 
editor.update({ history: "skip" }).selection.set([]);

History is a Plite extension. It stores undo and redo batches, exposes history state through its read group, and exposes undo/redo plus batching helpers through its update group.

Extension Authoring

Extensions register schema facts, owner-local read and update groups, corrections, commands, read middleware, lifecycle listeners, and runtime APIs.

Use an api factory for mounted host/runtime services, even when it needs no context. It receives one { editor, root, getContributions } object. Use update for feature commands that change Plite model state.

import {
  defineExtension,
  defineEditorSchema,
  defineStateField,
  property,
  schema,
} from "@platejs/plite";
import {
  defineExtension,
  defineEditorSchema,
  defineStateField,
  property,
  schema,
} from "@platejs/plite";

Helper Namespaces

Pure data helpers live on ElementApi, LocationApi, NodeApi, PathApi, PointApi, RangeApi, SelectionApi, SpanApi, and TextApi. ChangeSet and DocumentChange own canonical change algebra.

Inside editor.read(...) and editor.update(...), prefer grouped state.* and tx.* APIs. Use helper namespaces when library code needs pure operations on Plite data outside an editor transaction.

Related APIs

  • Plate shows where @platejs/plite is re-exported from the platejs umbrella package.
  • Plate Editor covers the React/Core editor layer built on top of this package.