Vizel API / react/src / useVizelEditor

Function: useVizelEditor()

function useVizelEditor(options?): Editor | null;

Defined in: packages/react/src/hooks/useVizelEditor.ts:58

React hook to create and manage a Vizel editor instance.

Reactive vs mount-time options

The Tiptap editor instance is created once on mount. To avoid expensive teardowns, most options are read once at mount and ignored on subsequent renders. The single exception is editable, which is mirrored through editor.setEditable() whenever the prop value changes.

on* callbacks (onUpdate, onError, etc.) are also captured at mount, matching Vue's useVizelEditor and Svelte's createVizelEditor. Passing a fresh closure on every render is silently ignored. Wrap callbacks in useLatest (or any stable ref) when you need them to read live state — the high-level <Vizel /> component does exactly this with its own props.

Changing initialContent, initialMarkdown, placeholder, features, extensions, flavor, locale, or autofocus after mount has no effect. Use editor.commands.setContent(...) (or the corresponding feature command) to update the document after mount.

Parameters

Parameter	Type
options	VizelCreateEditorOptions

Returns

Editor | null

Examples

const editor = useVizelEditor({
  placeholder: "Start typing...",
  onUpdate: ({ editor }) => {
    console.log(editor.getJSON());
  },
});

return <VizelEditor editor={editor} />;

// With initial markdown content
const editor = useVizelEditor({
  initialMarkdown: "# Hello World\n\nThis is **bold** text.",
});