Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Overview
    • Why This Fork
    • Examples
    • Installing Plite
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Canonical Change Substrate
    • Improving Performance
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Document Changes
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • Using TypeScript
    • Roots
    • Document State
    • Editing Behavior
    • Selection And DOM
    • Clipboard And Paste
    • Decorations, annotations, and widgets
    • Schema
    • Anchor API
    • Location API
    • Path API
    • PointEntry API
    • Point API
    • Range API
    • Selection API
    • Location Types APIs
    • Span API
    • Editor
    • Element API
    • NodeEntry API
    • Node API
    • Node Types APIs
    • Text API
    • Debug Value Scrubbing
    • Transforms API
    • Plite DOM
    • History Editor API
    • History Plugin Setup
    • History
    • Plite History
    • Plite Hyperscript
    • Plite PaginationExperimental
    • Annotations
    • DOM Coverage Boundaries
    • Editable Component
    • External Text Views
    • Plite React Event Handling
    • Virtualized Rendering
    • Plite React Hooks
    • React Editor Setup
    • React Editor
    • Plite React
    • Plite Component
    • Plite Yjs
    • Plite
    • Migration
    • Contributing
    • FAQ
    • Resources

Installing Plite

PreviousNext

Install the React editor packages and render the smallest useful Plite editor.

Plite ships its editor runtime and optional subpaths in one package. Install it with React and React DOM for a React editor.

Installation

Install the React editor path first.

pnpm add plitejs react react-dom
pnpm add plitejs react react-dom
PackageOwns
plitejseditor runtime, document model, transactions, helper APIs
plitejs/domDOM conversion, clipboard helpers, browser environment helpers
Why This ForkAdding Event Handlers

On This Page

InstallationUsageListening for changesNext steps
Build your editor
Production-ready AI template and reusable components.
Get all-access
plitejs/react<EditorRoot>, <Editable>, React hooks, editor setup
react, react-domReact peer packages

Usage

Import the React editor pieces from plitejs/react.

import {
  Editable,
  EditorRoot,
  type ValueChangeContext,
  useEditor,
} from "plitejs/react";
import {
  Editable,
  EditorRoot,
  type ValueChangeContext,
  useEditor,
} from "plitejs/react";

Before we render anything, let's define the document shape for this editor.

type CustomText = { text: string };
type ParagraphElement = { type: "paragraph"; children: CustomText[] };
type CustomValue = ParagraphElement[];
 
const initialValue: CustomValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];
type CustomText = { text: string };
type ParagraphElement = { type: "paragraph"; children: CustomText[] };
type CustomValue = ParagraphElement[];
 
const initialValue: CustomValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];

CustomValue is the TypeScript shape of this editor's primary document. Passing it to useEditor keeps element and text types attached to the editor API.

Call useEditor inside the component so React keeps the same editor object for the component lifetime.

Render the editor with <EditorRoot> and <Editable>.

const App = () => {
  const editor = useEditor<CustomValue>({ initialValue });
 
  return (
    <EditorRoot editor={editor}>
      <Editable />
    </EditorRoot>
  );
};
const App = () => {
  const editor = useEditor<CustomValue>({ initialValue });
 
  return (
    <EditorRoot editor={editor}>
      <Editable />
    </EditorRoot>
  );
};

useEditor({ initialValue }) seeds the editor. <EditorRoot> provides that existing editor to everything underneath it, and <Editable> renders the editable document surface.

This is the smallest useful Plite editor. If you render App, you should see a paragraph with the text A line of text in a paragraph. When you type, Plite updates the document through the editor runtime.

Listening for changes

Most applications save the document value somewhere. Use onValueChange for a single-root document.

const App = () => {
  const editor = useEditor<CustomValue>({ initialValue });
 
  const handleValueChange = ({
    value,
  }: ValueChangeContext<CustomValue>) => {
    localStorage.setItem("content", JSON.stringify(value));
  };
 
  return (
    <EditorRoot editor={editor} onValueChange={handleValueChange}>
      <Editable />
    </EditorRoot>
  );
};
const App = () => {
  const editor = useEditor<CustomValue>({ initialValue });
 
  const handleValueChange = ({
    value,
  }: ValueChangeContext<CustomValue>) => {
    localStorage.setItem("content", JSON.stringify(value));
  };
 
  return (
    <EditorRoot editor={editor} onValueChange={handleValueChange}>
      <Editable />
    </EditorRoot>
  );
};

Use initialValue as the one-shot initial document passed to useEditor. If your app needs to replace the whole document after the editor exists, use an explicit editor update instead of treating <EditorRoot> like a controlled <textarea>.

Next steps

The editor is rendering plain text. Next, add event handlers so the editor can respond to keyboard shortcuts.