LexKit

Type-safe rich text editor for React developers

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

🚀 Demo • 📖 Documentation • ⚡ Playground

---

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

🎯 Smart List Handling

• Toggle lists with intelligent nesting behavior
• Context-aware toolbar (indent/outdent appear when needed)
• Nested lists without keyboard shortcuts
• Clean UX that matches modern editors

📤 Export & Import

• HTML with semantic markup
• Markdown with GitHub Flavored syntax
• JSON for structured data
• Custom transformers for specialized formats

🎨 Theming & Styling

• CSS classes or Tailwind utilities
• Custom themes for consistent styling
• Dark mode support
• Accessible by default

Real World Usage

LexKit powers editors in:

• Content management systems
• Documentation platforms
• Blog editors
• Note-taking applications
• Comment systems
• Collaborative writing tools

Community & Support

• 💬 Discord - Get help, share ideas
• 🐛 GitHub Issues - Bug reports, feature requests
• 💭 Discussions - Questions, showcase your projects

Contributing

We welcome contributions! Whether you:

• Find and report bugs
• Suggest new features
• Contribute code or documentation
• Share projects built with LexKit
• Star the repo to show support

Check our Contributing Guide to get started.

🏅 Sponsors

A huge thank you to my golden sponsor:

@initdesk

Your support helps keep this project alive and growing! 🙏

💝 Become a Sponsor

Support This Project

LexKit is free and open source, built by developers for developers. If it's helping you build better editors, consider supporting its development:

• ⭐ Star this repository to show your support
• 💝 Sponsor the project to help with maintenance and new features
• 📢 Share LexKit with other developers

Your support keeps this project alive and helps us build better tools for the React community.

---

Built with ❤️ by novincode

MIT License - Use it however you want.