npm package: @lyfie/luthor-headless
Description: Luthor Editor - A headless, extensible rich text editor built on Lexical
Author: Luthor Team
Latest version: 2.7.10

<div align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/lyfie-org/luthor/main/apps/web/public/luthor-logo-horizontal-dark.png" />
    <img src="https://raw.githubusercontent.com/lyfie-org/luthor/main/apps/web/public/luthor-logo-horizontal-light.png" alt="Luthor" width="360" />
  </picture>
  <h1>@lyfie/luthor-headless</h1>
  <p><strong>Headless, extension-first rich text editor runtime for React on top of Lexical.</strong></p>
</div>

<div align="center">

[![Project Status](https://img.shields.io/badge/status-stable%20release%20%7C%20internal%20QA-yellowgreen?style=flat-square)](https://github.com/lyfie-org/luthor)
[![Stability](https://img.shields.io/badge/stable%20release-expected%20soon-blue?style=flat-square)](https://github.com/lyfie-org/luthor/releases)

[![npm version](https://img.shields.io/npm/v/@lyfie/luthor-headless?style=flat-square)](https://www.npmjs.com/package/@lyfie/luthor-headless)
[![npm downloads](https://img.shields.io/npm/dm/@lyfie/luthor-headless?style=flat-square)](https://www.npmjs.com/package/@lyfie/luthor-headless)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@lyfie/luthor-headless?style=flat-square)](https://bundlephobia.com/package/@lyfie/luthor-headless)
[![types](https://img.shields.io/npm/types/@lyfie/luthor-headless?style=flat-square)](https://www.npmjs.com/package/@lyfie/luthor-headless)
[![license](https://img.shields.io/npm/l/@lyfie/luthor-headless?style=flat-square)](https://github.com/lyfie-org/luthor/blob/main/LICENSE)
[![last commit](https://img.shields.io/github/last-commit/lyfie-org/luthor/main?style=flat-square)](https://github.com/lyfie-org/luthor/commits/main)

</div>

<p align="center">
  :jigsaw: Build your own editor UI | :shield: Typed command/state API | :zap: Lexical performance
</p>

## Install

```bash
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:

```bash
pnpm add @emoji-mart/data
```

## Quick Usage

```tsx
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](https://www.luthor.fyi/docs/getting-started/luthor-headless)
- Features docs: [luthor.fyi/docs/luthor-headless/features](https://www.luthor.fyi/docs/luthor-headless/features)
- User guide (repo): [documentation/user/headless/getting-started.md](https://github.com/lyfie-org/luthor/blob/main/documentation/user/headless/getting-started.md)
- Extensions/config: [documentation/user/headless/extensions-and-configuration.md](https://github.com/lyfie-org/luthor/blob/main/documentation/user/headless/extensions-and-configuration.md)
- Import/export: [documentation/user/headless/import-export.md](https://github.com/lyfie-org/luthor/blob/main/documentation/user/headless/import-export.md)

## Related Packages

- Plug-and-play presets: [`@lyfie/luthor`](https://www.npmjs.com/package/@lyfie/luthor)

## License

MIT (c) Luthor Team