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.
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. |
#/##/###), 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 |
<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.
Inline markdown
Wrap text as you type and it becomes a mark: **bold**, *italic*, `code`, ~~strike~~ — no toolbar trip required.
Smart typography
Auto-corrects as you write: -- → —, (c) → ©, straight quotes → curly, and bare URLs linkify on paste.
Find & Replace
Floating panel with live match count and next/previous navigation. Replace one or all. Case-insensitive substring search.
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.
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.
Emoji
Type : followed by a shortcode — e.g. :rocket: — and pick from the autocomplete to drop in the emoji.
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.
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 |
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
sandboxattribute.
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