Building a Type-Safe Rich Text Editor in Next.js (with Lexical & Lexkit)

This content originally appeared on DEV Community and was authored by Shayan

So… I’ve always hated building editors. Either they’re too basic or just way too complex.

Then I was like: why not build my own? And that’s how LexKit happened

It’s a React-first, type-safe, DX-friendly editor system built on top of Lexical.

Perfect for Next.js apps if you want something lightweight but not boring.

Getting Started (Basic Example)

Here’s literally the simplest editor you can make with LexKit:

"use client";

import {
  createEditorSystem,
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
  RichText,
} from "@lexkit/editor";
import "./basic-editor.css";

// 1. Define your extensions (for features like bold, lists, etc)
const extensions = [
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
] as const;

// 2. Create typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

That’s the “engine.”
Now let’s add a toolbar so you can actually click stuff:

function Toolbar() {
  const { commands, activeStates } = useEditor();

  return (
    <div className="basic-toolbar">
      <button onClick={() => commands.toggleBold()} className={activeStates.bold ? "active" : ""}>
        Bold
      </button>
      <button onClick={() => commands.toggleItalic()} className={activeStates.italic ? "active" : ""}>
        Italic
      </button>
      <button onClick={() => commands.toggleUnorderedList()}>• List</button>
      <button onClick={() => commands.toggleOrderedList()}>1. List</button>
      <button onClick={() => commands.undo()} disabled={!activeStates.canUndo}>Undo</button>
      <button onClick={() => commands.redo()} disabled={!activeStates.canRedo}>Redo</button>
    </div>
  );
}

And the editor itself:

function Editor() {
  return (
    <div className="basic-editor">
      <Toolbar />
      <RichText
        placeholder="Start writing your content here..."
        classNames={{
          container: "basic-editor-container",
          contentEditable: "basic-content",
          placeholder: "basic-placeholder",
        }}
      />
    </div>
  );
}

export function BasicEditorExample() {
  return (
    <Provider extensions={extensions}>
      <Editor />
    </Provider>
  );
}

Boom you got a working editor in Next.js with bold, italic, lists, undo/redo.
No crazy config, no vendor lock-in.

Features that just work

• Type-safe extensions → autocomplete knows what commands exist.
• Next.js Ready → works out-of-the-box with use client.
• Theming? yep → the DefaultTemplate plays nice with next-themes
• Production-ready → images, tables, markdown, html import/export, history, you name it.

Final thoughts

Rich text editors suck less when you can actually understand the code.
LexKit is my attempt to make editors fun (and honestly DX-friendly).

If you’re already playing in the Next.js world → give it a spin.
Docs are here lexkit.dev

PS: if this helped, smash the or drop a comment. Makes me feel less like I’m coding into the void

Lexkit is open source, free and under MIT license. I love to develop it and push it forward. But like every other open source project, it’s only possible with your supports. whether it’s a github star, a comment or even a small donation.

To support this project check Github Repo
Thanks for your time, try it out and report any issues or bugs.

This content originally appeared on DEV Community and was authored by Shayan