Rune Catalog
Runes are Markdoc tags that reinterpret standard Markdown. A heading inside {% nav %} becomes a group title; a list inside {% recipe %} becomes ingredients. Same primitives, different meaning based on context.
This catalogue is generated from the registry. Every /runes/<name> page declares itself a rune entity in its frontmatter (type: rune, plus category, plugin, and a status of stable · beta · experimental · deprecated — default stable), and the views below are live collection and aggregate queries over them. Add a doc page — or install a plugin that ships one — and it appears here automatically, with no hand-maintained list to fall out of date.
There are currently 95 documented runes. Here's how they spread across the core library and the official plugins:
| Plugin | Count |
|---|---|
| Core | 49 |
| Business | 3 |
| Design | 7 |
| Docs | 3 |
| Learning | 2 |
| Marketing | 8 |
| Media | 3 |
| Places | 3 |
| Plan | 10 |
| Storytelling | 7 |
Core runes
These ship built-in with @refrakt-md/runes — no install needed. They cover universal content primitives, the entity registry, layout, code/data display, and site structure, grouped by what they do.
Layout
| Rune | Description |
|---|---|
Collapsible accordion sections for FAQ-style content | |
Add background images, video, and overlays to any section rune | |
Collapsible disclosure blocks for supplementary content | |
Addressable modal panel — declared once, opened from any xref on the page | |
Multi-image container with grid, carousel, or masonry layout | |
Flexible grid layout with columns, auto-fill, masonry, and responsive collapse | |
Interactive side-by-side comparison with slider, toggle, fade, and auto modes | |
Isolated HTML/CSS/JS rendering in an iframe with optional framework loading | |
A generic page section — an eyebrow, headline, and blurb above any content | |
Present visual content with frame chrome — shadow, displacement (bleed), offset, and aspect ratio | |
Tabbed content panels with heading-based tab labels | |
Section-level colour overrides via CSS custom properties |
Registry
| Rune | Description |
|---|---|
Project numbers from the registry — counts and per-group breakdowns — the number-projecting counterpart to collection and relationships, with field-match queries and a sub-filter that drives progress-bar ratios | |
Render a list, grid, or table of registry entities — the plural counterpart to ref and expand, with filtering, sorting, grouping, and per-item templates | |
Substitute a registered entity's source content inline — symmetric with xref but inlines the content instead of linking to it | |
Path-based inline references to project files — third member of the Registry family beside xref (one entity) and expand (one entity inlined), with optional drawer preview | |
Render an entity's relationship edges, grouped by kind — the plural-graph counterpart to ref and expand, generic over any domain's relationship vocabulary | |
Inline cross-references that resolve entities by ID or name from the entity registry |
Content
| Rune | Description |
|---|---|
Content with margin annotations and notes | |
Inline pill that flags a piece of content — status, category, recency, tag | |
Block-level wrapper that renders a horizontal row of content — the bar layout primitive, composable in prose | |
A generic, self-contained content card — optional media, body, and footer zones, with an optional whole-card link | |
Chat and dialogue display with alternating speaker messages | |
Block-level definition list — stacked dt/dd pairs that flow into multiple columns on wider screens | |
Embed external content like videos, tweets, and code demos | |
Enhanced images with captions, sizing, and alignment | |
Callouts and admonitions for supplementary information | |
Inline icons from the theme's icon registry | |
Side-by-side image and text layouts with configurable ratios | |
A generic completion bar — render a ratio from supplied numbers, with an optional label and sentiment variant | |
Editorial pull quotes with alignment and style variants | |
Progressive disclosure where content appears step by step | |
Margin notes and footnotes alongside main content | |
Styled text blocks with drop caps, columns, and lead paragraphs |
Site
| Rune | Description |
|---|---|
Display a list of blog posts from a content folder with sorting, filtering, and layout options | |
Navigation breadcrumbs showing page hierarchy | |
Structural runes for defining page layouts and named content regions | |
One navigation primitive for sidebars, header menubars, footer columns, and section landings | |
Sequential prev/next links for ordered docs and tutorials | |
Auto-generated table of contents from page headings |
Code & Data
| Rune | Description |
|---|---|
Structured budgets with categories, line items, and totals | |
Chart visualization from a Markdown table | |
Tabbed code blocks and styled code chrome | |
Side-by-side code comparison panels | |
Interactive data table with sorting, filtering, and pagination | |
Mermaid diagram rendering from code blocks | |
Side-by-side or unified diff view between two code blocks | |
Accessible HTML forms from Markdown with smart field type inference | |
Embed a project file as a syntax-highlighted code block — composes inside codegroup, diff, and any future fence-consuming container |
Official packages
Official rune packages are maintained by the refrakt team and styled by the Lumina theme. Install the packages you need and add them to your config — each package page includes installation instructions, a full rune reference, and docs for any extras like CLI commands or pipeline hooks.
@refrakt-md/marketingLanding page and conversion runes for marketing sites and product pages @refrakt-md/docsTechnical documentation runes for API references, code symbols, and changelogs @refrakt-md/designDesign system runes for color palettes, typography specimens, and token visualization @refrakt-md/learningEducational runes for tutorials, recipes, and instructional content @refrakt-md/storytellingWorldbuilding and narrative runes for fiction, games, and creative writing @refrakt-md/businessOrganizational runes for team directories, company profiles, and timelines @refrakt-md/placesEvent planning and location runes for travel guides and venue pages @refrakt-md/mediaAudio and music runes for playlists, tracks, and audio players @refrakt-md/planSpec-driven project planning with AI-native workflows and CLI tooling
Their runes, grouped by package (anything not shipped by core — so a third-party plugin's documented runes join here automatically):
Docs
| Rune | Description |
|---|---|
API endpoint documentation with method, path, and parameters | |
Version history with release notes | |
Code construct documentation for functions, classes, interfaces, enums, and type aliases |
Media
| Rune | Description |
|---|---|
Audio player with optional waveform and chapter markers | |
Curated playlist with track listing for albums, podcasts, audiobooks, and mixes | |
Standalone track or recording with metadata |
Plan
| Rune | Description |
|---|---|
Aggregation view of plan entities with filtering, sorting, and grouping | |
Bug report with structured reproduction steps and severity tracking | |
Architecture decision record capturing context, options, rationale, and consequences | |
Chronological view of architecture decision records | |
Named release target with scope, goals, and status tracking | |
Recent activity feed sorted by file modification time | |
Git-native entity history timeline showing lifecycle events derived from commits | |
Per-type completion bars and status breakdowns from the plan registry | |
Specification document with status tracking, versioning, and cross-referencing | |
Work item with acceptance criteria, references, and implementation tracking |
Marketing
| Rune | Description |
|---|---|
Magazine-style bento grid of cells — heading depth sizes each tile, or author cells explicitly for full control | |
Product and feature comparison matrices from Markdown | |
Focused call-to-action blocks with headlines, descriptions, and action buttons | |
Feature showcases with name, description, and optional icons | |
Full-width intro sections for landing pages with background support and action buttons | |
Pricing tables with tier comparison | |
Step-by-step instructions with numbered indicators | |
Customer testimonials and reviews |
Storytelling
| Rune | Description |
|---|---|
Relationship connections between characters or entities | |
Rich character profiles with sections for backstory, abilities, and more | |
Organizations and groups with ranks, holdings, and alignment | |
In-world knowledge entries for myths, prophecies, and historical records | |
Story arcs and quest trackers with progress markers | |
Location profiles for worldbuilding with geography and notable features | |
Comic and storyboard layouts from images and captions |
Business
| Rune | Description |
|---|---|
People directory for team pages and speaker lineups | |
Structured business or organization information | |
Chronological events displayed as a timeline |
Design
| Rune | Description |
|---|---|
Unified design token card composing palette, typography, and spacing runes with cross-page sandbox injection | |
Wrap content in realistic device frames for phones, tablets, browsers, and laptops | |
Color swatch grid with optional WCAG contrast and accessibility info | |
Component showcase with theme toggle and responsive viewports | |
Spacing scale, border radius, and shadow token display | |
Inline color chip for referencing colors in prose | |
Font specimen display with live Google Fonts loading |
Places
| Rune | Description |
|---|---|
Event information with date, location, and agenda | |
Day-by-day travel itineraries with timed stops and locations | |
Interactive map visualization from Markdown lists of locations |