Quick start

Build a working Edytor editor with the bundled plugins, an initial document, change handling and your own styles.

This page builds a complete Notion-style editor: rich text blocks and marks, images, code blocks, markdown shortcuts, a slash menu, a selection toolbar, block handles with a block menu, and the Notion theme. It then reads the document as it changes and styles the result.

The editor

<script lang="ts">
	import {
		Edytor,
		blockMenuPlugin,
		codePlugin,
		markdownShortcutsPlugin,
		richTextPlaceholder,
		slashMenuPlugin,
		toolbarPlugin,
		type EdytorInstance,
		type JSONBlock,
		type JSONDoc
	} from 'edytor';
	import 'edytor/themes/notion.css';

	// Rich text, images and arrow moves are included by default.
	const plugins = [codePlugin, markdownShortcutsPlugin, slashMenuPlugin, toolbarPlugin, blockMenuPlugin];

	const value: JSONDoc = {
		children: [
			{ type: 'heading', data: { level: 'h1' }, content: [{ text: 'Meeting notes' }] },
			{
				type: 'paragraph',
				content: [
					{ text: 'Type ' },
					{ text: '/', marks: { code: true } },
					{ text: ' to turn a line into another block.' }
				]
			},
			{ type: 'todo-item', data: { checked: false }, content: [{ text: 'Send the recap' }] }
		]
	};

	let edytor = $state<EdytorInstance>();

	const onChange = (root: JSONBlock) => {
		console.log('changed', root.children);
	};
</script>

<div class="edytor-notion">
	<Edytor {plugins} {value} {onChange} bind:edytor class="editor" placeholder={richTextPlaceholder} />
</div>

The edytor-notion class applies the imported theme, and richTextPlaceholder shows Notion’s placeholders (“Heading 1”, “To-do”, “Type ‘/’ for commands”…). Block handles are on by default, so each block has a + and a drag grip without an extra plugin; blockMenuPlugin opens its menu when you click the grip. Pass blockHandles={false} to remove them.

What each plugin adds:

Plugin order matters: when two plugins define the same block kind, mark or command, the first one wins. Rich text is added after your plugins so they can override it; defaultPlugins={false} turns the defaults off. See Plugins.

The slash menu, the toolbar, the block menu and the block handles each take a snippet to render your own markup while keeping their behavior. See Menus and handles.

Read the document

onChange receives the whole document after every committed change: local edits, remote edits and undo. Its argument is the root block, { type: 'root', children }.

With the instance bound, edytor.value returns the same JSON and is reactive, so it works in $derived:

<script lang="ts">
	// …the editor from above
	const blockCount = $derived(edytor?.value.children?.length ?? 0);
</script>

<p>{blockCount} blocks</p>

edytor.value returns the same object until the next change. Clone it before you mutate it. Computing it serializes the whole document, so prefer onChange (or a debounced save) over reading it in many places.

value is the initial content only. Updating the prop later does not replace the document, and value is not bindable (bind:value fails type-checking). To change content after mount, use commands.

Style the editor

The Notion theme above styles every bundled kind; its colors and fonts are custom properties you can override (see Styling). To style the editor yourself instead, drop the import and the edytor-notion class.

The editor renders a div with data-edytor (and your class). Each block is an element with data attributes you can target:

The block element’s tag comes from its kind: a heading renders h1–h3, a quote renders blockquote, list items render li. A few styles to start from:

.editor {
	outline: none;
	line-height: 1.6;
	--edytor-drop-indicator-color: #2eaadc;
}
.editor p {
	margin: 0;
}
.editor [data-edytor-type='quote'] {
	border-left: 3px solid currentColor;
	padding-left: 12px;
}
.editor [data-edytor-selected] {
	background: #e8e6df;
	border-radius: 3px;
}

The placeholder is drawn by a ::before rule the library ships, at 45% opacity. Override [data-edytor-text][data-placeholder]::before to restyle it.

To change a kind’s markup rather than its styles, override its snippet (see the component page) or define your own kind in Custom blocks.

Next steps