Introduction

Edytor is a collaborative block editor for Svelte 5 with a plugin system, a Yjs v14 engine, and a Durable Object server.

Edytor is a rich text editor for Svelte 5 built around blocks: paragraphs, headings, lists, to-dos, callouts, code, and any kind you define. It aims to give Svelte what Slate gives React — a small editing engine you can shape completely — with real-time collaboration built in.

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

  const value = {
    children: [{ type: "paragraph", content: [{ text: "Hello, world!" }] }],
  };
</script>

<Edytor {value} onChange={(next) => console.log(next)} />

Four ideas

A readable block model. A document is JSON: blocks with inline content (text with marks, and inline atoms) and nested children. The same shape goes in as value, comes out of onChange, and is what you store. See Document model.

Your markup, the editor’s text. Blocks, marks, and inline atoms render through Svelte snippets you write. The core owns the editable text and the selection; you own the markup around it. See Custom blocks.

Plugins can intercept every edit. Each edit is a command that is planned before it writes. Plugins see the command and every step it plans, and can veto it, replace it, or add their own blocks, marks, hotkeys, and UI. See Plugins.

Collaboration is the default. Every editor runs on a shared CRDT document (an owned fork of Yjs v14). The same document can back several views, sync across tabs, persist offline in IndexedDB, and meet other people in a Cloudflare Durable Object room that ships with the package. See Collaboration.

Where to go next