Skip to content
Luthor Docs

@lyfie/luthor-headless: Getting Started (User)

@lyfie/luthor-headless: Getting Started (User)

Section titled “@lyfie/luthor-headless: Getting Started (User)”

What this package is

Section titled “What this package is”

@lyfie/luthor-headless is a type-safe, extension-driven rich text editor system built on Lexical and React. It gives you complete control over toolbar/UI while still exposing a structured command + state API.

Versions and runtime requirements

Section titled “Versions and runtime requirements”
  • @lyfie/luthor-headless: 2.2.0
  • Node.js (workspace development): >=20
  • React peer range: ^18.0.0 || ^19.0.0
  • Lexical peer range: >=0.40.0 for lexical and required @lexical/* packages
  • Optional package for code-language intelligence: highlight.js >=11.0.0

Install

Section titled “Install”
Terminal window
pnpm add @lyfie/luthor-headless lexical @lexical/code @lexical/link @lexical/list @lexical/markdown @lexical/react @lexical/rich-text @lexical/selection @lexical/table @lexical/utils react react-dom

Optional:

Terminal window
pnpm add highlight.js

Minimal setup

Section titled “Minimal setup”
import {
  createEditorSystem,
  richTextExtension,
  boldExtension,
  italicExtension,
  RichText,
} from "@lyfie/luthor-headless";


const extensions = [richTextExtension, boldExtension, italicExtension] as const;
const { Provider, useEditor } = createEditorSystem<typeof extensions>();


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


  return (
    <div>
      <button onClick={() => commands.toggleBold()} aria-pressed={activeStates.bold}>Bold</button>
      <button onClick={() => commands.toggleItalic()} aria-pressed={activeStates.italic}>Italic</button>
    </div>
  );
}


export function Editor() {
  return (
    <Provider extensions={extensions} config={{ namespace: "MyEditor" }}>
      <Toolbar />
      <RichText placeholder="Write something..." />
    </Provider>
  );
}

Next docs

Section titled “Next docs”