LobeHub Editor

TOC

• 💡 Why Lobe Editor?
• 🚀 Getting Started
• 🤖 AI-Powered Development
• 👥 Who is this for?
• 📦 Entry Points
• 📚 Documentation
• 🛠️ Local Development
• 🤝 Contributing
• 🔗 Links

💡 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.

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

📚 Documentation

Full guides, API tables and live demos are at editor.lobehub.com:

• Editor and ChatInput
• Plugins — Markdown, slash, mention, table, code, math and more
• LexicalRenderer and LexicalDiff
• Changelog

🛠️ 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.