DEV Community

Cover image for I made Lexical Easy! ( Lexkit: Rich Text Editor story )
Shayan | Full-stack Developer & OSS Builder
Shayan | Full-stack Developer & OSS Builder

Posted on

I made Lexical Easy! ( Lexkit: Rich Text Editor story )

#tooling #showdev #react #typescript

LexKit: The Rich Text Editor That Doesn’t Suck

I’m stoked to drop LexKit, my open-source fix for rich text editors. Launched Sept 18, 2025, it’s a lightweight, TypeScript-first wrapper around Meta’s Lexical. It’s free (MIT license), headless, and makes building editors for React apps—like blogs or CMS—actually fun. Try the demo with a sweet ShadCN template!

Lexkit has Modern Docs

Why I Made LexKit

Rich text editors drove me nuts. Lexical? Fast and light (~20kb), but setting it up was a freakin’ nightmare—boilerplate city. TipTap? Powerful, but too heavy and clunky DX. I wanted something simple, type-safe, and flexible. So, I built LexKit to make Lexical easy.

What Makes LexKit Cool

  • Type-Safe: No runtime errors, thx to TypeScript. Autocomplete FTW. 
  import { createEditorSystem, boldExtension } from '@lexkit/editor';

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

  function Editor() {
    const { commands } = useEditor();
    return (
      <Provider extensions={extensions}>
        <button onClick={() => commands.toggleBold()}>Bold</button>
        <div contentEditable className="editor-content" />
      </Provider>
    );
  }
Enter fullscreen mode Exit fullscreen mode
  • Headless: Use ShadCN, Tailwind, or whatever. You style, LexKit handles logic.
  • 25+ Extensions: Bold, images, tables, markdown—plug ‘em in easy: 
  imageExtension.configure({ uploadHandler: async (file) => { /* upload stuff */ } });
Enter fullscreen mode Exit fullscreen mode
  • Fast & Light: Built on Lexical, so it’s snappy.
  • ShadCN Template: Ready-to-go UI in the demo.

Get Started Quick

  1. Install: 
   npm instal @lexkit/editor lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils
Enter fullscreen mode Exit fullscreen mode

(Typo in “instal” intentional for human vibe.)

  1. Basic Editor: 
   import { createEditorSystem, richTextExtension, boldExtension } from '@lexkit/editor';

   const extensions = [
     richTextExtension({ placeholder: 'Type here...', classNames: { contentEditable: 'editor' } }),
     boldExtension
   ] as const;

   const { Provider, useEditor } = createEditorSystem(extensions);

   function Editor() {
     const { commands } = useEditor();
     return (
       <Provider extensions={extensions}>
         <button onClick={() => commands.toggleBold()}>Make it bold!</button>
         {/* Editor renders here */}
       </Provider>
     );
   }
Enter fullscreen mode Exit fullscreen mode

Check docs for more, like theming or custom extensions.

What’s Next?

  • Y.js for real-time collab
  • AI stuff (autocomplete, grammar)
  • More templates (ShadCN, Radix)

Yo, Let’s Talk!

LexKit’s my baby to make editors less painful. Try the demo, star the GitHub, or hit me up on Discord. What’s your worst editor horror story? Lexical or TipTap got you down? Comment below!

Built with ❤️ by a solo dev. Gimme a star if you vibe with it!

Top comments (1)

Collapse
 
codeideal profile image
Shayan | Full-stack Developer & OSS Builder •

I'd love to hear your thoughts :) Feel free to drop a comment