Skip to main content
The Lexical repository includes a comprehensive collection of examples demonstrating various features, frameworks, and use cases. Each example is designed to be a starting point for building your own editor.

​
React Examples

Plain Text Editor

Simple plaintext editor with history and accessibility. Perfect starting point for basic text editing.Features: @lexical/plain-text, @lexical/history, @lexical/dragonTry on StackBlitz

Rich Text Editor

Rich text editor with formatting, history, and accessibility support.Features: @lexical/rich-text, @lexical/history, @lexical/dragonTry on StackBlitz

Table Plugin

Demonstrates table functionality with cell selection, formatting, and basic table operations.Features: Rich text, table plugin, toolbar with table controlsTry on StackBlitz

Collaboration (Yjs)

Real-time collaboration setup using Yjs for multi-user editing.Features: Collaboration via @lexical/yjs, WebSocket server, cursor syncingTry on StackBlitz

​
Vanilla JavaScript Examples

Basic Vanilla JS

Framework-agnostic implementation showing Lexical’s core capabilities without React.Features: Rich text, history, accessibility in pure JavaScriptTry on StackBlitz

Custom Plugin

Emoji plugin demonstrating custom nodes and transforms. Replaces text like :) with emoji graphics.Demonstrates: Custom TextNode extension, node transforms, plugin architectureTry on StackBlitz

iframe Integration

Shows how to use Lexical inside an iframe, useful for sandboxed editing environments.Features: Rich text within iframe, cross-document editingTry on StackBlitz

​
Advanced Examples

Node Replacement

Demonstrates how to replace built-in nodes with custom implementations (CustomParagraphNode).Demonstrates: Node replacement pattern, extending core nodesTry on StackBlitz

Node State & Styling

Shows how to use NodeState for custom node properties and dynamic styling.Demonstrates: NodeState API, custom properties, CSS integration

​
Lexical Extension Examples

Lexical Extension is an experimental API that provides a modern, signal-based approach to building editors.

Extension Table (React)

Table plugin built with Lexical Extension API in React.Features: Extension-based architecture, reactive signalsTry on StackBlitz

SvelteKit SSR

Server-side rendering with hydration in SvelteKit using Extension signals.Demonstrates: SSR/hydration, Svelte Store API compatibility, Vite HMRTry on StackBlitz

Vanilla + Tailwind

Vanilla JavaScript with Tailwind CSS styling using Extension API.Features: Extension signals, Tailwind integration

React Plugin Host

Demonstrates hosting React plugins within a vanilla Extension-based editor.Demonstrates: Framework interop, plugin architecture

​
Running Examples Locally

All examples can be run locally with: 
cd examples/<example-name>
npm install
npm run dev
For collaboration examples: 
npm run dev:local  # Starts both dev and collab servers

​
Using Examples as Templates

Each example is self-contained and can serve as a starting point:
  1. Copy the example directory
  2. Update package.json with your project details
  3. Modify the editor configuration to suit your needs
  4. Add additional plugins and features
Check the Playground for a full-featured implementation with all available plugins and features.

Build docs developers (and LLMs) love

Get started for freeTalk to us