Vizel API / svelte/src / createVizelEditor

Function: createVizelEditor()

function createVizelEditor(options?): object;

Defined in: packages/svelte/src/runes/createVizelEditor.svelte.ts:77

Svelte 5 rune to create and manage a Vizel editor instance. Returns a reactive editor state that works with EditorContent component.

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 following option is an exception:

• editable — propagated through editor.setEditable() whenever the prop value changes.

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

Parameters

Parameter	Type
options	CreateVizelEditorOptions

Returns

object

current

Get Signature

get current(): Editor | null;

Returns

Editor | null

Examples

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

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

<EditorContent editor={editor.current} />
{#if editor.current}
  <BubbleMenu editor={editor.current} />
{/if}

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