lobehub/lobe-editor

✒️ Lobe Editor - a modern, extensible rich text editor built on Meta's Lexical framework with dual-architecture design, featuring both a powerful kernel and React integration. Optimized for AI applications and chat interfaces.

Summary

LobeHub Editor (@lobehub/editor) is a rich text editor built on top of Meta's Lexical framework, split into a framework-agnostic kernel (plugin system, document handling, command dispatcher) and a React 19+ component layer. It ships with more than ten built-in plugins covering markdown, images, tables, mentions, slash commands, and file uploads, plus a pre-built ChatInput component aimed at messaging and LLM prompt interfaces.

What it is useful for

The package is most useful when you need a rich text surface that already understands chat-shaped content: @mentions, / triggered slash menus, file and image attachments, and inline code blocks. The ChatInput component accepts an enabledFeatures array such as ['mention', 'upload', 'codeblock'] and an onSend handler, so wiring it into a chat UI is largely a props configuration.

The kernel layer is useful when you want Lexical's editing engine without the React component tree, for instance in test harnesses or custom frontends. createEditor() returns an IEditor with setDocument / getDocument for JSON, Markdown, and plain text, a command system (dispatchCommand), and an event emitter (on, off). Code blocks are highlighted through Shiki with 100+ languages, and the upload plugin supports a priority-based handler chain so you can route different file types to different backends.

How engineers can use it

Install with bun add @lobehub/editor or pnpm add @lobehub/editor as documented. The minimum example wires useEditor and an <Editor> together, passing a plugin array such as [ReactListPlugin, ReactLinkPlugin, ReactImagePlugin, ReactCodeblockPlugin] and a slashOption.items array that maps each menu entry to a command dispatch like INSERT_HEADING_COMMAND. Content can be read back via editor.getDocument('markdown') or editor.getDocument('json') in the onChange callback.

For custom behavior, implement the IEditorPlugin interface and call kernel.registerNode plus kernel.registerCommand inside initialize. To run the playground locally, the README documents git clone, pnpm install, and pnpm run dev, which starts a lobedocs component playground.

Limitations: the editor requires React 19+, the README does not detail production bundle size (Shiki-based highlighting may be heavy), and the ChatInput API surface is described only at a high level, so behaviors outside the documented props may need source-level inspection. The license is MIT.