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

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!

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>

    );

  }

• 
  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 */ } });

• 
  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

(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>

     );

   }

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!