Package: headlessType: tutorialSurface: extension

Quickstart: @lyfie/luthor-headless

Start with headless runtime when your app owns editor UI.

When to use this

Use this quickstart when you need extension-level control and custom toolbar/layout.

Install

npm install @lyfie/luthor-headless lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/code @lexical/table @lexical/markdown @lexical/html @lexical/selection @lexical/utils

import {
  createEditorSystem,
  RichText,
  richTextExtension,
  boldExtension,
} from '@lyfie/luthor-headless';

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

function Toolbar() {
  const { commands } = useEditor();
  return <button onClick={() => commands.formatText('bold')}>Bold</button>;
}

export function App() {
  return (
    <Provider extensions={extensions}>
      <Toolbar />
      <RichText placeholder="Type here..." />
    </Provider>
  );
}