Vizel API / svelte/src / createVizelMarkdown

Function: createVizelMarkdown()

function createVizelMarkdown(getEditor, options?): CreateVizelMarkdownResult;

Defined in: packages/svelte/src/runes/createVizelMarkdown.svelte.ts:78

Svelte 5 rune for bidirectional Markdown synchronization with the editor.

Parameters

Parameter	Type	Description
getEditor	() => Editor | null | undefined	Function to get the editor instance
options	CreateVizelMarkdownOptions	Sync options

Returns

CreateVizelMarkdownResult

Markdown state and control functions

Examples

<script lang="ts">
import { createVizelEditor, createVizelMarkdown, VizelEditor } from '@vizel/svelte';

const editorState = createVizelEditor();
const markdownState = createVizelMarkdown(() => editorState.current, {
  debounceMs: 300,
});
</script>

<VizelEditor editor={editorState.current} />
<textarea
  value={markdownState.current}
  oninput={(e) => markdownState.setMarkdown(e.currentTarget.value)}
/>
{#if markdownState.isPending}
  <span>Syncing...</span>
{/if}

<script lang="ts">
// With initial markdown value
const markdownState = createVizelMarkdown(() => editorState.current, {
  initialValue: "# Hello World",
  transformDiagrams: true,
});
</script>