LexKit Docs

Get Started with LexKit

Build your first rich text editor in minutes

Follow this step-by-step guide to create powerful, type-safe rich text editors with LexKit. We'll cover installation, basic setup, theming, and extensions.

5 Minute SetupType-SafeProduction Ready

Try LexKit Live

Experience the power of LexKit with this interactive editor. Use the toolbar to format text, create lists, and explore features.

Start typing...

1. Installation

Install LexKit and its dependencies

Install LexKit

npm install @lexkit/editor

Install Lexical Dependencies

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

Ready to Code!

That's it! LexKit is now installed and ready to use. Let's create your first editor.

2. Choose Your Approach

LexKit offers two ways to create rich text editors

Option A: RichText as Extension

Use RichText as a LexKit extension with createEditorSystem for full type safety and modularity. RichTextExtension is built on top of Lexical's RichTextPlugin to make using the original tool easier.

RichText as LexKit Extension

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

// Define your extensions (as const for type safety)
const extensions = [
  richTextExtension.configure({
    placeholder: "Start writing...",
    classNames: {
      container: "my-editor-container",
      contentEditable: "my-editor-content",
      placeholder: "my-editor-placeholder"
    }
  }),
  boldExtension,
  italicExtension,
  historyExtension
] as const

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

function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <div className="my-editor">
        {/* RichText extension renders automatically */}
        {/* Add your toolbar or other UI here */}
      </div>
    </Provider>
  )
}

Option B: Manual RichText Setup

Use createEditorSystem with manual RichTextPlugin setup for maximum control. You can also use RichTextPlugin from Lexical directly, but LexKit's RichTextExtension is built on top of it to make using the original Lexical tool easier.

Manual RichText Setup

import { createEditorSystem, boldExtension, italicExtension, historyExtension } from "@lexkit/editor"
import { LexicalComposer } from '@lexical/react/LexicalComposer'
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
import { ContentEditable } from '@lexical/react/LexicalContentEditable'

// Define your extensions (without RichText extension)
const extensions = [
  boldExtension,
  italicExtension,
  historyExtension
] as const

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


  return (
    <LexicalComposer initialConfig={initialConfig}>
      <Provider extensions={extensions}>
        <div className="my-editor">
          <RichTextPlugin
            contentEditable={<ContentEditable className="my-editor-content" />}
            placeholder={<div className="my-editor-placeholder">Start writing...</div>}
          />
          {/* Add your toolbar or other UI here */}
        </div>
      </Provider>
    </LexicalComposer>
  )
}

Which to Choose?

RichText as Extension: Use createEditorSystem with RichTextExtension for full type safety and modularity. Perfect for complex editors.
Manual RichText Setup: Use createEditorSystem with manual RichTextPlugin setup for maximum control. Great for advanced customization.

2. How LexKit Works

Understand the core concepts: createEditorSystem, extensions, and RichText

LexKit is built around three core concepts that work together to give you complete control:

createEditorSystem

A factory function that creates a typed editor system based on your extensions. Provides full type safety.

Extensions

Modular pieces that add functionality like bold, italic, lists, images, etc. Mix and match as needed.

RichText

The core editor component that renders the editable content. Can be used standalone or with extensions.

Two Ways to Use LexKit

Extension System: Use createEditorSystem with RichTextExtension for full type safety and modularity. Perfect for complex editors.

Manual Setup: Use createEditorSystem with manual RichTextPlugin setup for maximum control. Great for advanced customization.

3. Theming and Styling

Style your editor with Tailwind CSS or custom themes

LexKit Theme System

Use LexKit's theme system to apply classnames to different editor elements for complete styling control.

LexKit Theme System

// Define a custom theme with classnames
const simpleTheme: LexKitTheme = {
  // Editor content styles
  paragraph: 'lexkit-paragraph',
  heading: {
    h1: 'themed-heading-h1',
    h2: 'themed-heading-h2',
    h3: 'themed-heading-h3',
  },
  list: {
    ul: 'themed-list-ul',
    ol: 'themed-list-ol',
    listitem: 'themed-list-li',
  },
  quote: 'lexkit-quote',
  link: 'lexkit-link',
  text: {
    bold: 'lexkit-text-bold',
    italic: 'lexkit-text-italic',
    underline: 'lexkit-text-underline',
  },
}

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

function ThemedEditor() {
  return (
    <Provider 
      extensions={extensions}
      config={{ theme: simpleTheme }}
    >
      <RichText placeholder="Themed editor content..." />
    </Provider>
  )
}

Themed Editor Example

See the theme system in action with custom classnames for each editor element.

Start writing with Tailwind-styled editor...

This editor is styled entirely with Tailwind CSS classes — no custom CSS files needed!

4. Working with Extensions

Add powerful features with LexKit's extension system

Using Built-in Extensions

LexKit comes with 25+ extensions for common features. Here's how to use them:

Setup Extension System

// 1. Define your extensions
const extensions = [MyExtension] as const

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

// 3. Use in component
function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <EditorContent />
    </Provider>
  )
}

Using Extension Commands

Access type-safe commands and state queries in your components:

Using Extension Commands

function MyEditor() {
  const { commands, stateQueries } = useEditor()

  const handleInsertText = () => {
    commands.insertText('Hello World!')
  }

  const handleClear = () => {
    commands.clearEditor()
  }

  const checkSelection = async () => {
    const hasSelection = await stateQueries.hasSelection()
    console.log('Has selection:', hasSelection)
  }

  return (
    <div>
      <div className="mb-4 space-x-2">
        <button onClick={handleInsertText}>
          Insert Text
        </button>
        <button onClick={handleClear}>
          Clear Editor
        </button>
        <button onClick={checkSelection}>
          Check Selection
        </button>
      </div>

      <EditorContent />
    </div>
  )
}

Available Extensions

Text Formatting: Bold, italic, underline, strikethrough, code

Structure: Headings, lists, quotes, horizontal rules

Rich Content: Tables, images, links, code blocks

Advanced: History, command palette, context menus

Creating Custom Extensions

Create your own extensions for custom functionality:

Create Custom Extension

import { createExtension } from '@lexkit/editor'

const MyExtension = createExtension({
  name: 'my-extension',
  commands: (editor) => ({
    // Define your commands here
    myCommand: () => console.log('Hello!')
  })
})

Learn Extension Development

What's Next?

Build on what you've learned and create amazing editors

Keep Learning

View All Examples Master Extensions Read Full Docs

Quick Wins

Add image upload to your editor

Implement table editing

Add keyboard shortcuts

Create custom extensions

Export to HTML/Markdown

Ready to Build?

You've learned the fundamentals of LexKit. Now you can:

Create production editors

Customize with themes

Extend with custom features