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 😅
Top comments (1)
Feel free to share your thoughts here with me :)