DEV Community

Cover image for ShadCN Rich Text Editor with Lexical + Lexkit
Shayan
Shayan

Posted on

ShadCN Rich Text Editor with Lexical + Lexkit

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 Editor Screenshot


Lexkit RTE made on Lexical

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

  1. Install lexkit
npm install @lexkit/editor
Enter fullscreen mode Exit fullscreen mode
  1. and Lexical Deps
npm install lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils
Enter fullscreen mode Exit fullscreen mode
  1. 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>
  )
}
Enter fullscreen mode Exit fullscreen mode


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)

Collapse
 
codeideal profile image
Shayan

Feel free to share your thoughts here with me :)