Vizel API / react/src / useVizelMarkdown

Function: useVizelMarkdown()

function useVizelMarkdown(editor, options?): UseVizelMarkdownResult;

Defined in: packages/react/src/hooks/useVizelMarkdown.ts:79

React hook for bidirectional Markdown synchronization with the editor.

Parameters

Parameter	Type	Description
editor	Editor | null | undefined	The editor instance, or null/undefined while it is still initializing.
options	UseVizelMarkdownOptions	Sync options

Returns

UseVizelMarkdownResult

Markdown state and control functions

Examples

import { useVizelEditor, useVizelMarkdown } from '@vizel/react';

function App() {
  const editor = useVizelEditor();
  const { markdown, setMarkdown, isPending } = useVizelMarkdown(editor, {
    debounceMs: 300,
  });

  return (
    <div>
      <VizelEditor editor={editor} />
      <textarea
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
      />
      {isPending && <span>Syncing...</span>}
    </div>
  );
}

// With initial markdown value
const { markdown, setMarkdown } = useVizelMarkdown(editor, {
  initialValue: "# Hello World",
  transformDiagrams: true,
});