Overview

Plite editor runtime docs for the Plate-maintained package set.

Plite is a JSON editor runtime for building product-specific rich text editors. This docs section covers the Plite packages, their React renderer, their browser proof harness, and the boundaries that keep the runtime verifiable. Start here when you want the current package shape, not upstream Slate 0.x compatibility notes.

Install

Install the React editor path first:

pnpm add @platejs/plite @platejs/plite-dom @platejs/plite-react react react-dom

pnpm add @platejs/plite @platejs/plite-dom @platejs/plite-react react react-dom

Add optional packages only when the editor imports them:

pnpm add @platejs/plite-history @platejs/plite-hyperscript @platejs/yjs @platejs/plite-layout

pnpm add @platejs/plite-history @platejs/plite-hyperscript @platejs/yjs @platejs/plite-layout

@platejs/browser is the browser proof package. Use it in tests and proof harnesses, not as the product editing API.

Core Shape

Plite gives you a document model, an explicit runtime, and React rendering hooks.

Layer	What it owns
Document model	nested JSON nodes, paths, points, ranges, operations, primary `children`, extra `roots`, and document `state`
Runtime	`editor.read.<group>.<method>()`, `editor.update.<group>.<method>()`, grouped read/update callbacks, transactions, commits, normalization, refs, history integration, and extension groups
React	`<Plite>`, `<Editable>`, render functions, editor hooks, DOM repair, selection sync, overlays, and root-aware chrome
Proof	browser tests that check model state, rendered DOM, native selection where observable, focus, replay, and follow-up typing

The first editor usually looks like this:

import { Editable, Plite, usePliteEditor } from "@platejs/plite-react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text." }],
  },
];
 
export function Editor() {
  const editor = usePliteEditor({ initialValue });
 
  return (
    <Plite editor={editor}>
      <Editable placeholder="Start typing..." />
    </Plite>
  );
}

import { Editable, Plite, usePliteEditor } from "@platejs/plite-react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text." }],
  },
];
 
export function Editor() {
  const editor = usePliteEditor({ initialValue });
 
  return (
    <Plite editor={editor}>
      <Editable placeholder="Start typing..." />
    </Plite>
  );
}

One-shot reads stay explicit:

const value = editor.read.value();

const value = editor.read.value();

One-shot writes stay explicit:

editor.update.text.insert("Hello");

editor.update.text.insert("Hello");

Use editor.read((state) => ...) and editor.update((tx) => ...) when a command needs grouped reads, grouped writes, extension namespaces, update tags, or post-commit hooks.

Pick A First Path

If you want to...	Start with
Render one editor in React	Installing Plite
Understand the model	Nodes, then Locations
Port commands	Executing Commands, then Commands
Store editor values	Saving to a Database and Document Meta
Add schema or custom transactions	Extensions
Understand editing behavior	Editing Behavior, then Selection And DOM
Handle paste, copy, drop, or fragments	Clipboard And Paste
Build comments, highlights, or overlays	Projection And Overlays
Test browser editing behavior	Browser
Move from upstream Slate 0.x	Migration

Examples

The examples run inside this docs app:

Use examples for behavior shape. Use the docs pages for the API contract.

Package Map

Package	Read when
`@platejs/plite`	You need the editor runtime, document model, helper APIs, transactions, extensions, or state fields.
`@platejs/plite-dom`	You need DOM conversion, clipboard helpers, hotkeys, or browser environment helpers.
`@platejs/plite-react`	You render editors with React, use `<Editable>`, read editor state in components, or build overlays.
`@platejs/plite-history`	You need undo/redo and history state.
`@platejs/plite-hyperscript`	You write JSX editor fixtures for tests.
`@platejs/yjs`	You connect a Plite editor to Yjs document meta and awareness.
`@platejs/plite-layout`	You build page-layout proof surfaces or paged editor experiments.
`@platejs/browser`	You write browser-level editor proof.

Proof Boundary

This package set is unpublished beta documentation. Treat the runtime as current, but do not treat every adjacent editor problem as solved.

Area	Claim
Desktop editor behavior	Claimed when package tests and browser proof cover the behavior.
Raw mobile device behavior	Deferred until real device proof exists.
Pagination	Kept in `@platejs/plite-layout` and example lanes; not the core editor promise.
Collaboration	`@platejs/yjs` owns Plite/Yjs mapping. Apps own providers, auth, persistence, and rooms.
Upstream identity	This is Plite package set, not an official upstream Slate release.

Read Why This Fork for the maintenance philosophy and hard boundaries.