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

Virtualized Rendering

PreviousNext

Explicitly omit offscreen top-level blocks from a large editor's DOM.

VirtualizedEditable mounts a measured window of top-level blocks. Use it when a complete document DOM exceeds the product's tested interaction or memory budget. Ordinary Editable always mounts the complete document.

Usage

Install the virtualizer with React:

pnpm add plitejs @tanstack/react-virtual react react-dom
pnpm add plitejs @tanstack/react-virtual react react-dom

Render VirtualizedEditable from its dedicated entrypoint. Give it a bounded scroll surface, either on the editable itself or on an ancestor.

import { EditorRoot, useEditor } from
Plite React Event HandlingPlite React Hooks

On This Page

UsageInitial renderingDOM omissionNative behavior limits
Build your editor
Production-ready AI template and reusable components.
Get all-access
"plitejs/react"
;
import { VirtualizedEditable } from "plitejs/react/virtualized";
const editor = useEditor({ initialValue });
return (
<EditorRoot editor={editor}>
<VirtualizedEditable
estimatedBlockSize={32}
overscan={4}
style={{ height: 480, overflowY: "auto" }}
/>
</EditorRoot>
);
import { EditorRoot, useEditor } from "plitejs/react";
import { VirtualizedEditable } from "plitejs/react/virtualized";
 
const editor = useEditor({ initialValue });
 
return (
  <EditorRoot editor={editor}>
    <VirtualizedEditable
      estimatedBlockSize={32}
      overscan={4}
      style={{ height: 480, overflowY: "auto" }}
    />
  </EditorRoot>
);

estimatedBlockSize defaults to 32 CSS pixels and must be a positive finite number. overscan defaults to 2 and must be a nonnegative integer. Plite owns the item keys, range extraction, measurement, and scroll targeting.

Plate applications use the matching facade:

pnpm add platejs @tanstack/react-virtual react react-dom
pnpm add platejs @tanstack/react-virtual react react-dom
import { VirtualizedEditorContent } from "platejs/react/virtualized";
 
<VirtualizedEditorContent estimatedBlockSize={32} overscan={4} />;
import { VirtualizedEditorContent } from "platejs/react/virtualized";
 
<VirtualizedEditorContent estimatedBlockSize={32} overscan={4} />;

Initial rendering

Before Plite can measure a scroll owner, the virtualized surface renders the first eight top-level blocks plus selected or requested targets. The same rule applies to server rendering, detached roots, hidden roots, and zero-size roots, so the first client render agrees with the server markup.

Measured viewport changes and option changes retain mounted rows by node key. Switching between Editable and VirtualizedEditable creates a different mounted view. Remount deliberately and restore any app-owned view state when a product changes that choice.

DOM omission

Unmounted content remains in the Plite value, history, and collaboration state, but it has no native DOM. Model selection and clipboard serialization can cross an omitted range. Selected endpoints stay mounted, and Plite mounts a requested target before scrolling or editing it.

Native behavior limits

AreaBehavior
Browser findNative find sees mounted blocks only.
Screen readersAssistive technology traverses mounted blocks only.
Print and exportDOM-based output includes mounted blocks only.
CopyPlite serializes selected model content to plain text, HTML, and its fragment format.

Use Editable when the product requires complete native find, accessibility traversal, print output, or third-party DOM access. Virtualized mobile selection and IME behavior need browser and device proof for the product's supported matrix.

For paginated editors, use PagedEditable virtualize. Pagination owns live measurement, page surfaces, fragment placement, selection projection, and canvas coordinates. VirtualizedEditable remains the top-level block option for a continuous editor.

See DOM Coverage Boundaries for selection, copy, materialization, and native find limits at unmounted ranges.