Overview
The v2 surface — useTypixEditor, EditorContent, TypixEditorContext, and the editor instance
The Typix v2 core is a small surface — one hook, one context, one
content component, and the TypixEditor instance they give you. Everything
else ships as vendorable components you copy into your repo with
typix ui add — toolbar buttons, floating menus, mention pickers, slash
command palette, and more.
import {
EditorContent,
TypixEditorContext,
defaultTheme,
useTypixEditor,
} from "@typix-editor/react";The four public APIs
useTypixEditor
Hook that creates the editor instance from extensions + options.
TypixEditorContext.Provider
Shares the editor instance with descendant components.
EditorContent
Renders the editable Lexical surface.
defaultTheme
Maps Lexical node types to .typix-* CSS classes.
Canonical structure
Every Typix editor follows this same shape:
"use client";
const extensions = [StarterKit(), /* …more extensions */];
export function Editor() {
const editor = useTypixEditor({
extensions,
theme: defaultTheme,
namespace: "my-editor",
});
return (
<TypixEditorContext.Provider value={{ editor }}>
<Toolbar /> {/* uses useCurrentTypixEditor via context */}
<EditorContent editor={editor} placeholder="…" />
<FloatingLinkUI /> {/* optional UI overlay */}
</TypixEditorContext.Provider>
);
}The TypixEditor instance
useTypixEditor returns a TypixEditor — a thin, typed wrapper around
Lexical. The most useful members:
| Method | Returns | Notes |
|---|---|---|
editor.chain() | ChainBuilder<R> | Fluent command builder. Each extension augments the type. |
editor.can() | CanChainBuilder<R> | editor.can().toggleBold() — check before executing. |
editor.lexical | LexicalEditor | Direct access for raw Lexical commands. |
editor.getJSON() | SerializedContent | Serializable content state. |
editor.getHTML() | string | Rendered HTML. |
editor.getText() | string | Plain text. |
editor.setContent(state) | void | Load serialized content. |
editor.isEmpty() | boolean | True for empty editor. |
editor.isEditable() | boolean | Current read/write state. |
editor.setEditable(v) | void | Toggle read/write. |
editor.emitter | TypixEventEmitter | Subscribe to events (contentChange, selectionChange, etc.). |
editor.namespace | string | The namespace from options. |
editor.id | string | Auto-generated unique id. |
Hooks shipped from @typix-editor/react
| Hook | Purpose |
|---|---|
useTypixEditor(options) | Create + manage the editor (top-level only). |
useCurrentTypixEditor() | Get the editor from context (descendant components). |
useTypixEditorState() | Subscribe to Typix-managed state. |
useEditorState(selector) | Subscribe to a Lexical selector; re-renders only when value changes. |
useSelectionStyle() | Selection-aware styling info. |
useSignal(signal) | Subscribe to a Typix signal primitive. |
useRange() | Current selection's DOMRange. |
useMouseListener(handler) | Listen for editor mouse events. |
Floating UI primitives
Shipped for building bubble menus, slash menus, mention pickers:
| Export | Purpose |
|---|---|
<EditorBubbleMenu> / <EditorBubbleItem> | Selection-triggered floating menu. |
<EditorCommand> / <EditorCommandItem> / <EditorCommandList> / <EditorCommandEmpty> | Command-palette pattern. |
<SuggestionMenu> + useSuggestionItems + filterSuggestionItems | Typeahead pattern (mentions, @-pickers). |
<FloatingElement> + useFloatingElement | Generic floating UI helper. |
<RootContext> + useRootContext | Floating-anchor element registry. |
What v2 dropped from v1
If you're porting from v1, the following symbols are gone — search and replace:
| v1 | v2 |
|---|---|
<EditorRoot extension={ext}> | useTypixEditor({ extensions }) + <TypixEditorContext.Provider> |
useTypixEditor() (no args, from context) | useCurrentTypixEditor() |
useActiveFormats({ formats }) | useEditorState((state) => …) + editor.chain().can().toggleBold() |
useBlockType() | useEditorState((state) => state.blockType) |
editor.toggleBold() | editor.chain().toggleBold().run() |
defineExtension(...) from @typix-editor/react | defineExtension(...) from lexical (or build via @typix-editor/core helpers) |
defaultExtensionNodes | (removed — extensions register their own nodes) |