Installation

Install the edytor package in a Svelte 5 project and check the requirements for the editor, the CRDT entries and the server room.

Edytor ships as one npm package, edytor. It contains the <Edytor> component, the bundled plugins, the collaborative document API and its CRDT engine, and a Cloudflare Durable Object room.

Requirements

• Svelte 5. svelte is a peer dependency (^5.0.0). The editor uses runes and snippets, so Svelte 4 is not supported.
• A Svelte-aware bundler. The root entry ships .svelte files. SvelteKit, or Vite with @sveltejs/vite-plugin-svelte, compiles them for you.
• Node.js 22 or later (the package’s engines field).

Install

The pre-release is not on npm yet. This site hosts its tarball; install it by URL:

npm install https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

pnpm add https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

yarn add https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

bun add https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

nub add https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

aube add https://edytor-docs.beynar.workers.dev/edytor-0.1.0-next.0.tgz

The tarball is the package exactly as it will be published (pnpm pack of this release). Once the pre-release is on npm, install it by its tag instead: pnpm add edytor@next. Name the tag: a bare edytor resolves to the old 0.0.11.

If your project does not have Svelte yet, add it too:

npm install -D svelte

pnpm add -D svelte

yarn add -D svelte

bun add -D svelte

nub add -D svelte

aube add -D svelte

Do not install yjs for Edytor. The collaboration engine (a fork of Yjs v14) is vendored inside the package and is available as edytor/crdt. The yjs package on npm is v13, which cannot exchange updates with v14.

The package pulls in a few runtime dependencies on its own: Atlassian’s Pragmatic Drag and Drop (block handles), TanStack Highlight (code block highlighting) and lib0.

Build from source

To build the tarball yourself, use a local clone of the repository that has the arch-v2 branch, where this release is developed. master still holds 0.0.11, so check out the branch first:

cd edytor           # your clone
git switch arch-v2
pnpm install
pnpm package        # builds dist/
pnpm pack           # writes edytor-0.1.0-next.0.tgz

Then, in your project, install the file:

npm install ../edytor/edytor-0.1.0-next.0.tgz

pnpm add ../edytor/edytor-0.1.0-next.0.tgz

yarn add ../edytor/edytor-0.1.0-next.0.tgz

bun add ../edytor/edytor-0.1.0-next.0.tgz

nub add ../edytor/edytor-0.1.0-next.0.tgz

aube add ../edytor/edytor-0.1.0-next.0.tgz

Verify the install

Render an editor. It needs no setup:

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

<Edytor />

You should see one empty paragraph. Hover it to reveal its block handle (touch devices always show it). An empty document always starts with one block of the default type (paragraph). <Edytor> includes the rich text, image and arrow move plugins by default, so this is already a working rich text editor.

Next steps