Customizable Rich Text Editor with shadcn/ui & Lexical – shadcn-editor

shadcn-editor is a modern rich text editor built on top of shadcn/ui components and Facebook’s Lexical text editor framework.

It comes with a modular plugin system that allows you to add features like tables, images, code blocks, and mathematical equations based on your project’s specific needs.

Features

Preview

Use Cases

• Content Management Systems – Build rich text editors for blog posts, articles, and documentation platforms
• Documentation Platforms – Create technical documentation with code syntax highlighting, tables, and mathematical formulas
• E-learning Applications – Develop course content editors with multimedia support and interactive elements
• Customer Support Tools – Build knowledge base editors with rich formatting and embedded media
• Note-taking Applications – Create personal or team note-taking tools with markdown export capabilities

Installation

1. Initialize your project with shadcn/ui if you haven’t already:

npx shadcn-ui@latest init

2. Add the editor to your project, run the appropriate command for your package manager:

# pnpm
pnpm dlx shadcn-ui@latest add editor
# npx
npx shadcn-ui@latest add editor
# yarn
yarn dlx shadcn-ui@latest add editor
# bun
bunx shadcn-ui@latest add editor

This will install the necessary dependencies and create the core editor files within your project structure, typically under /components/editor/.

Usage

1. Import the editor and manage its state within your React component.

"use client"
import { useState } from "react"
import { SerializedEditorState } from "lexical"
import { Editor } from "@/components/editor"
// Define an initial state for the editor
const initialValue: SerializedEditorState = {
  root: {
    children: [
      {
        children: [
          {
            detail: 0,
            format: 0,
            mode: "normal",
            style: "",
            text: "Hello World 🚀",
            type: "text",
            version: 1,
          },
        ],
        direction: "ltr",
        format: "",
        indent: 0,
        type: "paragraph",
        version: 1,
      },
    ],
    direction: "ltr",
    format: "",
    indent: 0,
    type: "root",
    version: 1,
  },
}
export default function EditorPage() {
  const [editorState, setEditorState] = useState<SerializedEditorState>(initialValue)
  return (
    <div>
      <Editor
        editorSerializedState={editorState}
        onSerializedChange={(value) => {
          setEditorState(value)
        }}
      />
    </div>
  )
}

2. To modify the editor’s functionality, you can edit the files created during installation.

• editor.tsx – Main editor component that handles configuration and state management
• nodes.tsx – Defines custom node types for extended functionality
• plugins.tsx – Contains all plugin implementations and toolbar components

3. Add plugins of your choice to the plugins.tsx file and the corresponding nodes to nodes.tsx. All possible plugins:

• Rich Text Editor
• Block Format
• Clear Formatting
• Element Format
• Font Color
• Font Family
• Font Format
• Font Size
• History
• Link
• Sub Super
• Clear Editor
• Counter Character
• Edit Mode Toggle
• Import Export
• Markdown Toggle
• Max Length
• Share Content
• Speech To Text
• Tree View
• Autocomplete
• Auto Embed
• Auto Focus
• Code
• Collapsible
• Component Picker Menu
• Context Menu
• Draggable Block
• Drag Drop Paste
• Emoji
• Equation
• Excalidraw
• Floating Text Format
• Hashtag
• Horizontal Rule
• Image
• Inline Image
• Keywords
• Layout
• Link
• Markdown
• Mention

Related Resources

• Lexical Framework – The underlying text editor framework powering shadcn-editor
• shadcn/ui – The component library providing the editor’s UI elements
• Lexical Playground – Interactive demo showcasing Lexical’s capabilities

FAQs

Q: Why use a copy-paste approach instead of an npm package?
A: This approach gives you complete ownership and control over the code. You can customize components to match your exact needs without being constrained by a packaged solution.

Q: Which frameworks support shadcn-editor?
A: You can use shadcn-editor with any React-compatible framework including Next.js, Astro, Remix, Gatsby, and Create React App. The underlying Lexical framework is framework-agnostic.

Q: Can I use this editor in commercial projects?
A: Yes, shadcn-editor is free to use for both personal and commercial projects without requiring attribution. You have full rights to modify and distribute the code as needed.

Q: Does the editor support mobile devices?
A: Yes, shadcn-editor includes mobile-responsive design and touch-friendly interfaces. The editor works across desktop, tablet, and smartphone devices with appropriate touch interactions.