Install

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:

pnpm add @emoji-mart/data

Quick Usage

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>
  );
}

Highlights

• :gear: Extension-first architecture with configurable behaviors
• :brain: Type-safe command and active-state surface
• :building_construction: Compose only what your product needs
• :floppy_disk: JSON-first import/export workflow
• :art: Bring your own toolbar and design system

Compatibility

• Node: >=20 (workspace development)
• React: ^18.0.0 || ^19.0.0
• Lexical + @lexical/*: >=0.40.0
• Optional @emoji-mart/data: ^1.2.1

Documentation

• Docs landing: luthor.fyi/docs/getting-started/luthor-headless
• Features docs: luthor.fyi/docs/luthor-headless/features
• User guide (repo): documentation/user/headless/getting-started.md
• Extensions/config: documentation/user/headless/extensions-and-configuration.md
• Import/export: documentation/user/headless/import-export.md

Related Packages

• Plug-and-play presets: @lyfie/luthor

License

MIT (c) Luthor Team