Rune for Svelte
A Svelte rich-text editor in one action.
The Svelte adapter ships a use:rune action — bind it to any element with your config and content, and Rune renders the full editor. No build step, no dependencies, collaboration when you want it.
Why Rune for Svelte
- 01
Idiomatic Svelte action
use:rune={{ config, content }} on any element — no wrapper component ceremony, just an action.
- 02
Config-driven UI
The toolbar, bubble menu, slash menu, and shortcuts all read from one config object you control.
- 03
Zero dependencies
The same zero-dependency core under the Svelte adapter — a tiny footprint in your bundle.
$
npm install @parityfox/rune-editor@parityfox/rune-editor/svelte
<script> import { rune } from '@parityfox/rune-editor/svelte'; import config from './rune.config.js'; import '@parityfox/rune-editor/styles'; </script> <div use:rune={{ config, content: '<p>Hello</p>' }}></div>
Questions
- How do I add a rich text editor to Svelte with Rune?
- Install @parityfox/rune-editor, import rune from '@parityfox/rune-editor/svelte', import the styles, and apply use:rune={{ config, content }} to an element.
- Is it a component or an action?
- The Svelte adapter is an action (use:rune) you bind to any element, which keeps it lightweight and idiomatic to Svelte.
- Does the Svelte adapter support collaboration?
- Yes. Rune's opt-in Yjs collaboration layer works with the Svelte adapter for live presence, comments, and tracked changes.
Add it to your Svelte app.
Install the package and bind one action — a configurable, themeable editor in minutes.