Editor Setup

useTypixEditor is the v2 hook that creates and manages a Typix editor. It returns a TypixEditor instance — a thin, fluent wrapper around the underlying Lexical editor.

const editor = useTypixEditor({
  extensions,
  theme: defaultTheme,
  namespace: "my-editor",
});

Required options

extensions

The list of extensions the editor activates. Each extension is either an extension constructor (StarterKit(), DragDropPasteExtension()) or a configured pair via configExtension:

import { configExtension } from "@typix-editor/core";
import { MentionExtension } from "@typix-editor/extension-mention";

const extensions = [
  StarterKit(),
  configExtension(MentionExtension, { trigger: "@" }),
];

Extensions augment the global TypixCommands<R> interface, so editor.chain() is typed per installed extension. Adding MentionExtension adds editor.chain().insertMention(...) to the typed surface.

Common options

theme

The CSS-class theme passed to Lexical. Use defaultTheme from @typix-editor/react unless you have a reason to customize.

import { defaultTheme } from "@typix-editor/react";

namespace

A unique string identifying this editor. Required when multiple editors render on the same page so Lexical can disambiguate them.

namespace: "comment-editor",

content

Initial content as a serialized JSON state (the shape editor.getJSON() returns). Omit for an empty editor.

content: savedFromBackend,

editable

true (default) or false. Set to false for a read-only render.

editable: false,

autofocus

"start", "end", true, or false. Focuses the editor on mount.

autofocus: "end",

immediatelyRender

When false, the hook returns null on first render and the editor becomes available after mount. Required for SSR safety (Next.js App Router). Add a null guard.

const editor = useTypixEditor({
  extensions,
  immediatelyRender: false,
});

if (!editor) return null;

Lifecycle hooks

All optional callbacks. Each receives an object with the editor instance.

const editor = useTypixEditor({
  extensions,

  onBeforeCreate: ({ options }) => {
    // Inspect or mutate options before the editor is created.
  },
  onCreate: ({ editor }) => {
    console.log("Editor ready", editor.id);
  },
  onUpdate: ({ editor }) => {
    saveContent(editor.getJSON());
  },
  onFocus: ({ editor }) => {
    console.log("Focused");
  },
  onBlur: ({ editor }) => {
    console.log("Blurred");
  },
  onDestroy: () => {
    console.log("Editor torn down");
  },
  onError: (err) => {
    console.error(err);
  },
});

The editor instance

Once available, the editor exposes:

Sharing the editor

Pass the editor to children via TypixEditorContext.Provider so toolbar buttons, floating UI, and any descendant component can use the shipped hooks (useTypixEditorState, useEditorState, etc.) without prop drilling.

<TypixEditorContext.Provider value={{ editor }}>
  <EditorToolbar />
  <EditorContent editor={editor} placeholder="Start typing…" />
  <FloatingLinkUI />
</TypixEditorContext.Provider>

Hooks for editor state

In any descendant of the provider:

import {
  useCurrentTypixEditor,
  useTypixEditorState,
  useEditorState,
} from "@typix-editor/react";

• useCurrentTypixEditor() — direct access to the editor instance.
• useTypixEditorState() — subscribes to internal Typix state.
• useEditorState(selector) — subscribes to a Lexical state selector, re-renders only when the selected value changes.

Next