How many block types does Rune support?

Rune ships 14 block types — paragraph, headings (H1–H3), bullet and ordered lists, blockquote, code block, divider, callout, task list, video embed, image, table, toggle, and columns. Each is a single toggle in your config.

Does Rune support tables and task lists?

Yes. Tables (with a size picker and add/remove rows and columns) and interactive task lists are built-in block types, insertable from the slash menu, toolbar, or a Markdown shortcut.

Can I turn features off?

Yes — every block, mark, and plugin is a boolean in one config file. Turn something off and it disappears from the bundle's surface area, the toolbar, the slash menu, and the keyboard shortcuts at once.

What keyboard shortcuts does Rune have?

The common marks have shortcuts out of the box: ⌘B bold, ⌘I italic, ⌘U underline, ⌘⇧S strikethrough, ⌘E inline code, ⌘K link, and ⌘F find & replace. Markdown shortcuts (#, >, - then space) create blocks as you type.

Does Rune work with React, Vue, and Svelte?

Yes. The same engine ships first-class adapters for Vanilla JS, React, Vue 3, Svelte, and a native Web Component — all published subpaths of @parityfox/rune-editor.

Feature reference

Everything Rune can do.

The full catalogue — every block, mark, formatting control, and plugin, with the exact slash command and keyboard shortcut for each. Every item is a single toggle in rune.config.js; turn it off and it disappears from the toolbar, menus, and shortcuts.

14Block types

12Inline marks

5Formatting controls

7Plugins

∞Real-time collab

Block types #

Insert any block from the slash menu — type / at the start of a line — or from the toolbar. Headings, lists, quotes and code also respond to Markdown shortcuts.

Block	Slash	Output	Shortcut	Notes
¶ Paragraph	`/Paragraph`	`<p>`	—	Plain paragraph text; the default block.
H Heading 1–3	Toolbar ▾	`<h1>`–`<h3>`	`⌘⌥1` / `2` / `3`	Also via Markdown `#`, `##`, `###`.
• Bullet List	`/Bullet List`	`<ul>`	`⌘⇧8`	Markdown `-` or `*` + space.
1. Numbered List	`/Numbered List`	`<ol>`	`⌘⇧7`	Markdown `1.` + space.
" Quote	`/Quote`	`<blockquote>`	`⌘⇧B`	Markdown `>` + space.
</> Code Block	`/Code Block`	`<pre><code>`	`⌘⇧C`	Markdown ``` + space. `Tab` inserts spaces.
— Divider	`/Divider`	`<hr>`	—	Markdown `---` + `Enter`.
💡 Callout	`/Callout`	`<div>`	—	20 emoji icons, 6 colour themes. Click the icon to change it.
☑ Task List	`/Task List`	`<ul>`	—	Click checkbox to toggle. `Enter` on empty item exits the list.
▶ Video	`/Video`	`<figure>`	—	Paste a YouTube or Vimeo URL; sandboxed iframe + caption. Drag to resize — width, height, or diagonal.
🖼 Image	`/Image`	`<figure><img>`	—	Upload (base64 or your `uploadImage` hook) or paste a URL; editable caption.
⊞ Table	`/Table`	`<table>`	—	Pick dimensions from a size grid on insert. `Tab` to move; add or remove rows & columns from the hover controls or right-click menu.
▸ Toggle	`/Toggle`	`<div>`	—	Collapsible section — click the triangle to expand or collapse the body.
▥ Columns	`/Columns`	`<div>`	—	Side-by-side multi-column layout for arranging blocks horizontally.

ℹ️

Headings are inserted from the toolbar dropdown, Markdown (#/##/###), or the keyboard (⌘⌥1/2/3) — there is no /h1 slash item. On Windows/Linux, swap ⌘ for Ctrl and ⌥ for Alt.

Inline marks #

Select text to reveal the bubble menu, or use the toolbar and shortcuts. The first six have keyboard shortcuts; colour and font marks open a picker panel.

Mark	Output	Shortcut	Command
Bold	`<strong>`	`⌘B`	`toggleBold`
Italic	`<em>`	`⌘I`	`toggleItalic`
Underline	`<u>`	`⌘U`	`toggleUnderline`
Strikethrough	`<s>`	`⌘⇧S`	`toggleStrike`
Inline code	`<code>`	`⌘E`	`toggleInlineCode`
Link	`<a>`	`⌘K`	`toggleLink`
Superscript	`<sup>`	—	`toggleSuperscript`
Subscript	`<sub>`	—	`toggleSubscript`
Font size	`<span>`	Panel	`setFontSize`
Font family	`<span>`	Panel	`setFontFamily`
Text colour	`<span>`	Panel	`setTextColor`
Highlight / background	`<span>`	Panel	`setTextBackground`

🔗

Press ⌘K (or click a link) to open the inline link popover — edit the URL, visit, or unlink without leaving the document. Links are clickable straight from the editor.

＠

Also available: a dedicated Highlight mark (<mark>) for marker-pen styling, plus @-mention and #-hashtag autocomplete marks. Mentions and hashtags ship off by default — turn them on and provide an editor.fetchMentions source.

Colours & fonts #

The picker panels ship with these presets. Font size and colours also accept custom values.

Text colours

Ten presets via setTextColor(value) — Default, Gray #9b9b9b, Brown #64473a, Orange #d9730d, Yellow #dfab01, Green #0f7b6c, Blue #0b6e99, Purple #6940a5, Pink #ad1a72, Red #e03e3e.

Highlight colours

Ten soft backgrounds via setTextBackground(value) — Default (transparent), Gray #f1f1ef, Brown #f4eeee, Orange #fbecdd, Yellow #fdecc8, Green #ddedea, Blue #ddebf1, Purple #eae4f2, Pink #f4dfeb, Red #fde8e3.

Font sizes

Six presets via setFontSize(value) — Small 0.8em, Normal 1em, Medium 1.15em, Large 1.4em, X-Large 1.75em, Huge 2.25em — plus a custom px input (6–200px).

Font families

Nine presets via setFontFamily(value) — Default (inherit), Inter, Arial, Georgia, Times New Roman, Trebuchet MS, Verdana, Courier New, JetBrains Mono.

Formatting controls #

Block-level layout controls, applied to the current block.

Control	Command	Options / behaviour
Text align	`setTextAlign(align)`	Left · Center · Right · Justify
Line height	`setLineHeight(value)`	Compact `1` · Snug `1.25` · Normal `1.5` · Relaxed `1.75` · Loose `2`
Indent	`indentBlock()`	+24px per step, up to 240px
Outdent	`outdentBlock()`	−24px per step, down to 0
Clear formatting	`clearFormat`	Strips inline formatting + links from the selection

Plugins #

Drop-in behaviours. Each is a single flag under plugins in your config.

↳

Markdown shortcuts

Type Markdown at the start of a line and it transforms on Space: #/##/### headings, > quote, - / * bullets, 1. numbered, ``` code. --- + Enter makes a divider.

block-level

Inline markdown

Wrap text as you type and it becomes a mark: **bold**, *italic*, `code`, ~~strike~~ — no toolbar trip required.

inline

“”

Smart typography

Auto-corrects as you write: -- → —, (c) → ©, straight quotes → curly, and bare URLs linkify on paste.

auto-correct

⌕

Find & Replace

Floating panel with live match count and next/previous navigation. Replace one or all. Case-insensitive substring search.

⌘F Enter next ⇧Enter prev Esc close

⠿

Drag to reorder

A drag handle appears to the left of any block on hover. Grab it to reorder blocks; a drop indicator shows where it lands.

handle

🖌

Format painter

Click the toolbar button to copy the format at the cursor, then select target text to paint it on. Copies bold/italic/underline/strike plus font size, family, colour and background.

single-use

😀

Emoji

Type : followed by a shortcode — e.g. :rocket: — and pick from the autocomplete to drop in the emoji.

autocomplete

Real-time collaboration #

An opt-in Yjs layer in collab/. The core editor stays dependency-free; collab deps (Yjs, ws, y-websocket, y-indexeddb) load only when you turn it on.

👥

Live presence

Remote cursors, selection highlights and typing indicators — each collaborator in their own colour.

💬

Comments

Threaded comments anchored to a selection; they follow the text as the document changes.

✍️

Tracked suggestions

Suggestion mode records edits as proposed changes; reviewers accept or reject them inline.

🔌

Offline-first

IndexedDB persistence keeps you editing offline and syncs when the connection returns.

🌐

Two transports

Networked WebSocketProvider, or an in-process memory-hub for demos & tests.

🧱

Full block coverage

Concurrent editing across all blocks — including per-cell tables and callout bodies.

→

Setup, the server, and the auth hook are covered in the collaboration docs and the in-repo guides under docs/.

Export & output #

Get content out in whatever shape you need.

Method	Returns / effect
`editor.getHtml()` / `setHtml()`	Read or replace content as a sanitized HTML string
`editor.getText()`	Plain text (`innerText`)
`editor.getMarkdown()` / `setMarkdown()` / `insertMarkdown()`	Read, replace, or insert content as Markdown
`editor.getJSON()` / `setJSON()`	Portable JSON document — store it, diff it, restore it
`editor.print()`	Opens a clean print dialog

🖥️

Render without a browser. jsonToHtml(doc) and markdownToHtml(md) are exported as standalone functions that need no DOM — store a JSON document and render it to HTML server-side in Node, then hydrate the editor on the client.

Security #

Sanitized output — getHtml() returns cleaned markup.
Safe paste — pasted content is sanitized before it enters the document.
Blocked schemes — javascript: and other dangerous URLs are rejected on links and images.
Sandboxed embeds — video iframes use a restrictive sandbox attribute.

Stacks & adapters #

One engine, five ways to use it — no build step required. Each adapter is a published subpath of the same package.

Vanilla JS

createFromConfig('#app', config) from @parityfox/rune-editor — the canonical API.

⚛

React

<RuneEditor> component + useRune hook from rune-editor/react.

▲

Vue 3

<RuneEditor> component + useRune composable from rune-editor/vue.

◆

Svelte

use:rune action from rune-editor/svelte — bind it to any element.

Web Component

<rune-editor> custom element from rune-editor/web-component — drop it into any HTML page.

Ready to wire it up?

Pick your stack and copy the snippet — you’ll have an editor running in five minutes.

Read the docs

Frequently asked questions

How many block types does Rune support?: Rune ships 14 block types — paragraph, headings (H1–H3), bullet and ordered lists, blockquote, code block, divider, callout, task list, video embed, image, table, toggle, and columns. Each is a single toggle in your config.
Does Rune support tables and task lists?: Yes. Tables (with a size picker and add/remove rows and columns) and interactive task lists are built-in block types, insertable from the slash menu, toolbar, or a Markdown shortcut.
Can I turn features off?: Yes — every block, mark, and plugin is a boolean in one config file. Turn something off and it disappears from the bundle's surface area, the toolbar, the slash menu, and the keyboard shortcuts at once.
What keyboard shortcuts does Rune have?: The common marks have shortcuts out of the box: ⌘B bold, ⌘I italic, ⌘U underline, ⌘⇧S strikethrough, ⌘E inline code, ⌘K link, and ⌘F find & replace. Markdown shortcuts (#, >, - then space) create blocks as you type.
Does Rune work with React, Vue, and Svelte?: Yes. The same engine ships first-class adapters for Vanilla JS, React, Vue 3, Svelte, and a native Web Component — all published subpaths of @parityfox/rune-editor.