LexKit

November 27, 2025 · View on GitHub

Type-safe rich text editor for React developers

Built on Meta's Lexical. Headless, extensible, and production-ready.

🚀 Demo • 📖 Documentation • ⚡ Playground

LexKit Editor

Why LexKit?

Rich text editors shouldn't be a nightmare. LexKit makes building them delightful:

🔒 Type-safe everything - Commands and states inferred from your extensions. No runtime surprises.
🎨 Headless & flexible - Build any UI you want. Style it your way.
🧩 Modular extensions - Add only what you need, when you need it.
⚡ Production features - HTML/Markdown export, image handling, tables, undo/redo.
⚛️ React-first - Hooks, components, and patterns you already know.

// Your extensions define your API - TypeScript knows everything ✨
const extensions = [boldExtension, listExtension, imageExtension] as const;
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

function MyEditor() {
  const { commands, activeStates } = useEditor();

  // TypeScript autocompletes and validates these
  commands.toggleBold();        // ✅ Available
  commands.toggleUnorderedList(); // ✅ Available
  commands.insertImage();       // ✅ Available
  commands.nonExistent();       // ❌ TypeScript error
}

Quick Start

npm install @lexkit/editor

Install the Lexical peer dependencies:

npm install lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils

import {
  createEditorSystem,
  boldExtension,
  italicExtension,
  listExtension,
  RichText,
} from "@lexkit/editor";

const extensions = [boldExtension, italicExtension, listExtension] as const;
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

function Toolbar() {
  const { commands, activeStates } = useEditor();
  return (
    <div className="toolbar">
      <button
        onClick={() => commands.toggleBold()}
        className={activeStates.bold ? "active" : ""}
      >
        Bold
      </button>
      <button
        onClick={() => commands.toggleItalic()}
        className={activeStates.italic ? "active" : ""}
      >
        Italic
      </button>
      <button onClick={() => commands.toggleUnorderedList()}>
        Bullet List
      </button>
    </div>
  );
}

function Editor() {
  return (
    <div className="editor-container">
      <Toolbar />
      <RichText placeholder="Start writing..." />
    </div>
  );
}

export default function App() {
  return (
    <Provider extensions={extensions}>
      <Editor />
    </Provider>
  );
}

That's it. You now have a fully functional, type-safe rich text editor.

Features

🎨 Built-in Extensions (25+)

Text Formatting: Bold, italic, underline, strikethrough, inline code
Structure: Headings, lists (with nesting), quotes, horizontal rules
Rich Content: Tables, images (upload/paste/alignment), links, code blocks
Advanced: History (undo/redo), command palette, floating toolbar, context menus