Build Full-Featured Rich Text Editors in React ( Lexical + Lexkit )

In this article, I’ll share my step-by-step approach to building a full-featured Rich Text Editor in React.

The reason I chose Lexical (over Tiptap or others) is simple: speed ⚡.

But… Lexical by itself can be a bit painful to work with.

It’s low-level, verbose, and you often end up handling too much boilerplate.

That’s why I built LexKit — an open-source layer on top of Lexical.

It’s DX-friendly, type-safe, and ships with ready-to-use templates (even for shadcn).

👉 It gives us the full power of Lexical, but with a lot more out-of-the-box features.

👉 Plug-and-play extensions.

👉 Strong type safety.

📚 Great docs are here → lexkit.dev/docs

🛠️ Installing LexKit

First, install LexKit + Lexical in your project:

npm install @lexkit/editor

And install the required Lexical packages:

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

✨ Creating the Basic Editor

Let’s create a basic editor together:

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

// 1. Define your extensions (as const for type safety)
const extensions = [
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
] as const;

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

The nice thing?
useEditor is fully type-safe — it knows exactly what commands you have.

🛠️ Toolbar Example

Here’s a simple toolbar with some text formatting actions:

// Toolbar Component - Shows basic text formatting buttons
function Toolbar() {
  const { commands, activeStates } = useEditor();

  return (
    <div className="basic-toolbar">
      <button
        onClick={() => commands.toggleBold()}
        className={activeStates.bold ? "active" : ""}
        title="Bold (Ctrl+B)"
      >
        Bold
      </button>
      <button
        onClick={() => commands.toggleItalic()}
        className={activeStates.italic ? "active" : ""}
        title="Italic (Ctrl+I)"
      >
        Italic
      </button>
      <button
        onClick={() => commands.toggleUnorderedList()}
        className={activeStates.unorderedList ? "active" : ""}
        title="Bullet List"
      >
        • List
      </button>
      <button
        onClick={() => commands.toggleOrderedList()}
        className={activeStates.orderedList ? "active" : ""}
        title="Numbered List"
      >
        1. List
      </button>
      <button
        onClick={() => commands.undo()}
        disabled={!activeStates.canUndo}
        className={!activeStates.canUndo ? "disabled" : ""}
        title="Undo (Ctrl+Z)"
      >
        ↶ Undo
      </button>
      <button
        onClick={() => commands.redo()}
        disabled={!activeStates.canRedo}
        className={!activeStates.canRedo ? "disabled" : ""}
        title="Redo (Ctrl+Y)"
      >
        ↷ Redo
      </button>
    </div>
  );
}

📝 Putting It All Together

Now, let’s use our Toolbar inside the editor provider:

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