Vizel API / react/src / VizelProps

Interface: VizelProps

Defined in: packages/react/src/components/Vizel.tsx:22

Properties

autofocus?

optional autofocus?: number | boolean | "all" | "start" | "end";

Defined in: packages/react/src/components/Vizel.tsx:45

Auto focus on mount

---

bubbleMenuContent?

optional bubbleMenuContent?: (props) => ReactNode;

Defined in: packages/react/src/components/Vizel.tsx:79

Custom bubble menu content as a render prop. Receives the bound editor instance so the consumer can drive Tiptap commands from custom controls. Mirrors the Vue <slot name="bubble-menu" :editor> and the Svelte bubbleMenu: Snippet<[{ editor }]>.

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

ReactNode

---

children?

optional children?: ReactNode;

Defined in: packages/react/src/components/Vizel.tsx:81

Additional children to render inside the editor root

---

className?

optional className?: string;

Defined in: packages/react/src/components/Vizel.tsx:59

Custom class name for the editor container

---

editable?

optional editable?: boolean;

Defined in: packages/react/src/components/Vizel.tsx:43

Whether the editor is editable (default: true)

---

enableEmbed?

optional enableEmbed?: boolean;

Defined in: packages/react/src/components/Vizel.tsx:72

Enable embed option in bubble menu link editor (requires Embed extension)

---

extensions?

optional extensions?: Extensions;

Defined in: packages/react/src/components/Vizel.tsx:57

Additional Tiptap extensions

---

features?

optional features?: VizelFeatureOptions;

Defined in: packages/react/src/components/Vizel.tsx:47

Feature configuration

---

flavor?

optional flavor?: VizelMarkdownFlavor;

Defined in: packages/react/src/components/Vizel.tsx:53

Markdown output flavor. Controls how Markdown is serialized when exporting content.

Default

"gfm"

---

initialContent?

optional initialContent?: JSONContent;

Defined in: packages/react/src/components/Vizel.tsx:24

Initial content in JSON format

---

initialMarkdown?

optional initialMarkdown?: string;

Defined in: packages/react/src/components/Vizel.tsx:33

Initial content in Markdown format. If both initialContent and initialMarkdown are provided, initialMarkdown takes precedence.

Example

<Vizel initialMarkdown="# Hello World\n\nThis is **bold** text." />

---

locale?

optional locale?: VizelLocale;

Defined in: packages/react/src/components/Vizel.tsx:55

Locale for translated UI strings

---

markdown?

optional markdown?: string;

Defined in: packages/react/src/components/Vizel.tsx:92

Controlled markdown content. When set, the editor content will be synchronized with this value. Use together with onMarkdownChange for controlled mode.

Example

const [md, setMd] = useState("# Hello");
<Vizel markdown={md} onMarkdownChange={setMd} />

---

onBlur?

optional onBlur?: (props) => void;

Defined in: packages/react/src/components/Vizel.tsx:110

Callback when editor loses focus

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

void

---

onCreate?

optional onCreate?: (props) => void;

Defined in: packages/react/src/components/Vizel.tsx:102

Callback when editor is created

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

void

---

onDestroy?

optional onDestroy?: () => void;

Defined in: packages/react/src/components/Vizel.tsx:104

Callback when editor is destroyed

Returns

void

---

onError?

optional onError?: (error) => void;

Defined in: packages/react/src/components/Vizel.tsx:115

Callback when an error occurs during editor operations. Provides structured error information for logging or user feedback.

Parameters

Parameter	Type
error	VizelError

Returns

void

---

onFocus?

optional onFocus?: (props) => void;

Defined in: packages/react/src/components/Vizel.tsx:108

Callback when editor gets focus

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

void

---

onMarkdownChange?

optional onMarkdownChange?: (markdown) => void;

Defined in: packages/react/src/components/Vizel.tsx:98

Callback when markdown content changes. Called with the current markdown string when the editor content is updated. Use together with markdown for controlled mode.

Parameters

Parameter	Type
markdown	string

Returns

void

---

onSelectionUpdate?

optional onSelectionUpdate?: (props) => void;

Defined in: packages/react/src/components/Vizel.tsx:106

Callback when selection changes

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

void

---

onUpdate?

optional onUpdate?: (props) => void;

Defined in: packages/react/src/components/Vizel.tsx:100

Callback when content changes

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

void

---

placeholder?

optional placeholder?: string;

Defined in: packages/react/src/components/Vizel.tsx:41

Placeholder text when editor is empty

---

showBubbleMenu?

optional showBubbleMenu?: boolean;

Defined in: packages/react/src/components/Vizel.tsx:70

Whether to show the bubble menu (default: true)

---

showToolbar?

optional showToolbar?: boolean;

Defined in: packages/react/src/components/Vizel.tsx:61

Whether to show the toolbar (default: false)

---

toolbarContent?

optional toolbarContent?: (props) => ReactNode;

Defined in: packages/react/src/components/Vizel.tsx:68

Custom toolbar content as a render prop. Receives the bound editor instance so the consumer can drive Tiptap commands from custom controls. Mirrors the Vue <slot name="toolbar" :editor> and the Svelte toolbar: Snippet<[{ editor }]>.

Parameters

Parameter	Type
props	{ editor: Editor; }
props.editor	Editor

Returns

ReactNode

---

transformDiagramsOnImport?

optional transformDiagramsOnImport?: boolean;

Defined in: packages/react/src/components/Vizel.tsx:39

Automatically transform diagram code blocks (mermaid, graphviz) to diagram nodes when importing markdown content. Only applies when initialMarkdown is provided.

Default

true