A rich text editor for React, built on Meta's Lexical, for developers building AI apps: chat composers, Markdown documents and agent-driven editing.
Documentation · Changelog · Report Bug · Request Feature
TOC
💡 Why Lobe Editor?
Lobe Editor (@lobehub/editor) is a drop-in rich text editor for React apps that talk to AI, from chat input boxes to full documents.
- Ready for chat — A chat composer with slash commands,
@ mentions, attachments and a send button, ready to drop in
- Markdown in, Markdown out — Type Markdown shortcuts, paste Markdown, and get clean Markdown or JSON back
- Let AI edit safely — Models can change the document while users review and accept or reject each change
- Rich content — Tables, code blocks, math, images, files, links, lists and collapsible sections
- Works beyond the browser — Process content on the server, render it read-only (SSR-friendly), and collaborate in real time
- AI-native —
skills.md and llms.txt let coding agents use the editor correctly
🚀 Getting Started
$ bun add @lobehub/editor
# or
$ pnpm add @lobehub/editor
Requires React 19 and the peer dependencies react, react-dom, @lobehub/ui and motion.
A minimal editor with lists, links and code blocks:
import { ReactCodeblockPlugin, ReactLinkPlugin, ReactListPlugin } from '@lobehub/editor';
import { Editor, useEditor } from '@lobehub/editor/react';
export default function MyEditor() {
const editor = useEditor();
return (
<Editor
editor={editor}
placeholder="Type / for commands..."
plugins={[ReactListPlugin, ReactLinkPlugin, ReactCodeblockPlugin]}
onTextChange={(editor) => {
console.log(editor.getDocument('markdown'));
}}
/>
);
}
Next steps:
- Editor — props, plugins, mentions and slash menus
- ChatInput — build a chat composer
- Components — all components, plugins and renderers
🤖 AI-Powered Development
Lobe Editor is built for AI-assisted development. The docs site publishes machine-readable references, so agents use real props and APIs instead of guessing.
| Resource | What it does |
|---|
| Agent Skills | editor.lobehub.com/skills.md — setup, workflow and an index of every component and plugin. Give this URL to your agent in Cursor, Claude Code, Codex and others |
| llms.txt | editor.lobehub.com/llms.txt — structured page index with descriptions and outlines for LLMs |
| Markdown docs | Every docs page has a .md version, e.g. Editor and ChatInput |
Copy this prompt to your agent:
Read https://editor.lobehub.com/skills.md and follow it to add @lobehub/editor.
Works with Cursor, Claude Code, Windsurf, GitHub Copilot and any tool that can read llms.txt or fetch a URL.
👥 Who is this for?
- AI chat apps that need a rich input box with mentions, commands and attachments
- AI writing and knowledge tools where a model edits documents and users review the changes
- Backends that convert or render editor content without a browser
- Collaborative editors that sync documents in real time
📦 Entry Points
| Entry | Use it for |
|---|
@lobehub/editor | Plugins, commands and the editor kernel |
@lobehub/editor/react | Editor, ChatInput, SendButton and hooks |
@lobehub/editor/headless | Reading and writing documents on the server, without a DOM |
@lobehub/editor/renderer | Read-only, SSR-safe rendering and diffs of saved content |
📚 Documentation
Full guides, API tables and live demos are at editor.lobehub.com:
🛠️ Local Development
You can use Github Codespaces for online development:
Or clone it for local development:
$ git clone https://github.com/lobehub/lobe-editor.git
$ cd lobe-editor
$ pnpm install
$ pnpm dev
pnpm dev starts the docs site with live demos. Run pnpm test for tests and pnpm ci for lint and type checks.
🤝 Contributing
Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you're made of.
If you work on the docs site with an AI agent, the repo ships agent skills in .agents/skills (using-docs-kit, building-landing-home).
🔗 Links
- 🍭 Lobe UI - React component library for AI apps
- 🥨 Lobe Icons - AI / LLM brand logos and icons
- 📊 Lobe Charts - React chart components
- ✒️ Lobe Editor - Lexical-based rich text editor for React, with Markdown, plugins and a chat composer
- 🎤 Lobe TTS - TTS / STT speech library
- 📐 Lobe Lint - ESLint, Prettier, Stylelint, Commitlint and more lint configs
- 😀 Fluent Emoji - Fluent Emoji assets
- 📖 Docs Kit - Reusable documentation toolkit and lobedocs CLI for LobeHub component libraries
- 🌊 Streamdown - Headless streaming markdown engine for React
📝 License
Copyright © 2025 LobeHub.
This project is MIT licensed.
