The Edytor component

Every prop of the Edytor component, with types and defaults, plus the snippet overrides for blocks, marks and inline blocks.

<Edytor> renders one editable (or readonly) view of a document. This page lists every prop it accepts and the snippets you can pass to replace how a kind renders.

<script lang="ts">
	import { Edytor } from 'edytor';
</script>

<Edytor
	value={{ children: [{ type: 'paragraph', content: [{ text: 'Hello' }] }] }}
	placeholder="Write something…"
	onChange={(root) => save(root.children)}
/>

Props

Most props are read once, when the component is created. Changing them later has no effect; recreate the component (for example with {#key}) to apply new ones. The Live column marks the props that follow updates.

value is the initial content, not a binding: bind:value fails type-checking. Read changes with onChange or edytor.value.

document, room/server/sync and value together

• Only value: the view creates its own document, seeds it, and destroys it on unmount.
• room, server or sync: the view creates its own document and attaches the provider (sync overrides room/server). Stored or remote content wins; value seeds the document only when the provider has nothing, after it answered or timed out. Never pass a changing snapshot (onChange output) as value beside a room: a late seed of it can replace the room’s edits. Pass a fixed template or nothing; see deterministic seeds.
• document: the view renders that document once it is ready. If the document is still waiting for content and no provider is attached to it, the editable view seeds it with value when it mounts, unless a server refused it (document.syncRefusal): then an empty document stays waiting, and one that already holds content is shown. Passing document together with doc, awareness or actor throws.

A readonly view never connects: it shows value, or the document you pass.

Block handles

Handles are on unless you turn them off: a + that adds a block and a drag grip. List blockMenuPlugin to open Notion’s block menu on a grip click, or pass onActivate to open your own:

<script lang="ts">
	import { Edytor, type BlockHandleActivation } from 'edytor';

	let menu = $state<{ blockId: string; anchor: HTMLElement } | null>(null);
	const onActivate = ({ block, anchor }: BlockHandleActivation) => {
		menu = { blockId: block.id, anchor };
	};
</script>

<Edytor blockHandles={{ onActivate }} />

A focused handle moves its block with Alt+↑/↓ and nests or outdents it with Alt+→/←. Set the drop indicator color with the --edytor-drop-indicator-color custom property. To draw your own + and grip, pass a handle snippet: blockHandles={{ handle }} (see Menus and handles).

Snippets

Pass a snippet named <type>Block, <type>Mark or <type>InlineBlock to replace how one kind renders. The override replaces only the snippet: the kind’s element, void and island flags, hooks and clipboard forms stay as the plugin defined them.

<Edytor>
	{#snippet quoteBlock({ block, content, children })}
		<span class="quote-mark" contenteditable="false">“</span>
		{@render content()}
		{#if children}<div class="quote-children">{@render children()}</div>{/if}
	{/snippet}

	{#snippet boldMark({ content })}
		<span class="font-semibold">{@render content()}</span>
	{/snippet}
</Edytor>

The core renders the block element itself (the kind’s element, a div by default), so a block snippet renders only the markup inside it. Mark non-editable chrome inside a block with contenteditable="false", or with the use:block.void action.

For a type that is not a valid identifier, such as todo-item, spread the snippet under its name: <Edytor {...{ 'todo-itemBlock': todo }} />.

Content placed inside <Edytor> other than these snippets is ignored. To define a new kind rather than restyle one, write a plugin: see Custom blocks. To replace the slash menu, toolbar, block menu or block handle markup, pass snippets to their plugins: see Menus and handles.