I Built LexKit: A Modern, Type-Safe Rich Text Editor for React

Meet LexKit Editor: The Simple, Powerful, Headless Text Editor You’ll Wish You Had Sooner

Hey Dev.to crew! If you’ve ever torn your hair out building a rich text editor, this one’s for you. I’m thrilled to share LexKit Editor, a new open-source project I launched today, September 14, 2025. It’s a headless, TypeScript-friendly framework built on Lexical (Meta’s beast of an editor) that makes creating custom editors actually fun. No bloat, no headaches, just a clean, extensible tool for your React apps. And it’s free under the MIT license!

Why I Built LexKit (and Why You’ll Care)

Like many of you, I’ve wrestled with editors like TinyMCE (too heavy), Draft.js (RIP), and even Lexical (powerful but a setup nightmare). I wanted a tool that’s fast, flexible, and doesn’t force me to write endless boilerplate. After months of tinkering—and some late-night AI-assisted brainstorming (thanks, Grok by xAI!)—LexKit was born to solve these pain points:

• Type-Safe Awesomeness: Write code with confidence. LexKit’s TypeScript integration means your commands and extensions are fully typed with autocomplete. No more guessing or runtime errors!

  const { useEditor } = createEditorSystem([boldExtension, imageExtension]);
  const { commands } = useEditor();
  commands.toggleBold(); // ✅ Autocompleted
  commands.insertImage({ src: "cat.jpg" }); // ✅ Validated
  commands.oops(); // ❌ Caught at compile-time

• Headless Freedom: Build your UI however you want—ShadCN, Radix, or plain CSS. LexKit only handles the editor logic, so you’re not stuck with someone else’s styles.
• Plug-and-Play Extensions: Over 25 extensions for bold, lists, images, markdown, and more. Configure them easily:

  imageExtension.configure({
    uploadHandler: async (file) => { /* Your upload logic */ },
    resizable: true,
  });

• Production-Ready: Undo/redo, multi-format editing (HTML, Markdown, JSON), and error handling—all baked in.
• Light as a Feather: Built on Lexical’s virtual DOM, LexKit’s core is ~20kb gzipped. Your app stays snappy.

Why This Matters in 2025

With AI tools and React apps exploding, we need editors that keep up. LexKit lets you build custom editors for blogs, CMS, or note-taking apps without reinventing the wheel. It’s the balance of power and simplicity I’ve always wanted.

Get Started in Minutes

Here’s how to add LexKit to your React project:

1. Install:

   npm install @lexkit/editor lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text

1. Set Up a Basic Editor:

   import { createEditorSystem, boldExtension, imageExtension } from '@lexkit/editor';

   const extensions = [boldExtension, imageExtension];
   const { Provider, useEditor } = createEditorSystem(extensions);

   function MyEditor() {
     const { commands } = useEditor();
     return (
       <Provider extensions={extensions}>
         <button onClick={() => commands.toggleBold()}>Bold</button>
         <div contentEditable={true} />
       </Provider>
     );
   }

Want more? Check the docs for guides on multi-format editing, custom nodes, and more.

What’s Coming for LexKit?

• Real-time collaboration with Y.js
• AI-powered features like autocomplete and grammar checks
• More UI templates (ShadCN, Radix presets)
• Open to your ideas—join our community on GitHub!

Let’s Talk Rich Text Editors!

If you’re building a blog, CMS, or note-taking app, LexKit can save you weeks of dev time. Try the demo, star the GitHub repo, or join our Discord to share feedback. What’s your biggest editor struggle? Drop a comment—I’d love to hear your thoughts!