ShadCN Rich Text Editor with Lexical + Lexkit

#typescript #tooling #showdev #react

So, in my last post I was ranting about my struggles with building rich text editors…

Every time I touched Lexical, I loved the core idea but… the DX (developer experience) felt… meh.

I wanted something where I could just plug in extensions, have full type-safety, and not fight the damn thing every two lines of code.

And guess what? I finally did it 🎉

I built LexKit — my own little framework on top of Lexical.

DX-friendly, modular, and honestly the editor system I always wished existed.

Here's a quick preview of the shadcn template that I've made.

👉 Shadcn based editor ( See the demo )

Lexkit RTE made on Lexical

Lexkit Peerdeps on Lexical,
To add this editor into your own React project:

Install lexkit

npm install @lexkit/editor

and Lexical Deps

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

Then, check out the docs here to plug in the Shadcn template: Shadcn Based Template Docs | Source Code on Github

That’s it. No magic. Just install, copy, paste, and boom → you’ve got a Shadcn flavored RTE.

Qucik Editor Example to see how things work

Here’s a minimal editor setup using LexKit.
Literally like 10 lines of code:

import { createEditorSystem, richTextExtension, boldExtension, italicExtension } from "@lexkit/editor"

const extensions = [
  richTextExtension,
  boldExtension,
  italicExtension,
] as const

const { Provider } = createEditorSystem<typeof extensions>()

export default function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <div className="p-4 border rounded">
        {/* RichText extension renders automatically */}
      </div>
    </Provider>
  )
}

That’s all. You can start typing right away.

Why I built Lexkit?

Because DX matters to me a lot.
I was sick of guessing types, fighting plugins, and patching random examples from GitHub gists.

With LexKit:

you get typed commands & state queries out of the box
extensions are composable and headless (like lego blocks 🧱)
it’s React-first, so no weird wrappers
and yes… it actually works in production.

What’s Next?

I'm working to add more extensions, more templates and demos and more docs.

Your supports will keep this project going. It can be a comment or Github Star, or suggesting features and reporting bugs, or even a small donation or sponsorship 🙈

👉 Lexkit Docs
👉 GitHub

That’s it. Hope this helps you if you’ve been lost in RTE hell like I was.
And if you try it, let me know what breaks 😅