Every component below shows .mud source beside its HTML output — the same compiler pipeline on every Grav page. Built for humans, agents, and anyone tired of Twig soup.
Spec examples — ::: example — this page: source + live HTML preview
3. Grav frontmatter
Every page is default.mud (or pagename.mud) with YAML frontmatter:
format: mud-spec — theme body class + compiler path
process.markdown: false — Grav must not re-parse compiled HTML
process.twig: true — optional Twig in frontmatter only
See Language for a gentler intro; this page is the full component catalog.
4. Design tokens (@@@)
cmp-tokens
Page-level design context
Opens the .mud-page wrapper with data-mud-layout. Optional motion: on enables scroll reveals on sections (honors prefers-reduced-motion).
.mud source
@@@
name: grav-official
layout: spec-doc
motion: on
@@@
::: hero
mascot: none
eyebrow: Tokens active
title: Layout
accent: spec-doc
lead: The compiler wraps all following fences until the page ends.
:::
HTML output
MUD
Tokens active
Layout spec-doc
The compiler wraps all following fences until the page ends.
Use layout: promo on marketing pages; spec-doc on reference docs like this one.
5. hero
cmp-hero
Promo hero band
Eyebrow, split title + accent, lead (markdown), CTA links. Set mascot: none on light Grav themes.
.mud source
@@@
name: grav-official
layout: promo
@@@
::: hero
mascot: none
eyebrow: Grav MUD (Alpha)
title: Human/AI
accent: Design Language
lead: One `.mud` file. Full landing section. Zero template soup.
cta:
- [MUD Spec](/spec) primary
- [Services](/services)
:::
HTML output
MUD
Grav MUD (Alpha)
Human/AI Design Language
One .mud file. Full landing section. Zero template soup.
Per-fence animate="stagger" or page-level motion: on for default fade-up on cards, quotes, manifesto, etc.
.mud source
@@@
name: demo
layout: promo
motion: on
@@@
::: cards {animate="stagger"}
title: Staggered cards
card:
title: fade-up
body: Default when motion is on.
card:
title: stagger
body: Explicit on the fence.
:::
HTML output
Staggered cards
fade-up
Default when motion is on.
stagger
Explicit on the fence.
6. quote
cmp-quote
Pull quote
Blockquote with cite and optional footnote.
.mud source
@@@
name: grav-official
layout: promo
@@@
::: quote
quote: "Markdown told you what to say. MUD tells Grav how to show it."
cite: — Team DC, FutureVision Labs
note: PoC / pitch fork. Not an official Grav Core release. Yet.
:::
HTML output
"Markdown told you what to say. MUD tells Grav how to show it."
— Team DC, FutureVision Labs
PoC / pitch fork. Not an official Grav Core release. Yet.
7. cards
cmp-cards
Card grid
Repeat card: blocks with title and body (markdown).
.mud source
@@@
name: grav-official
layout: promo
@@@
::: cards
title: Why fences exist
card:
title: Declared structure
body: Sections are named — not guessed from H2 soup.
card:
title: AI-safe edits
body: Agents patch `::: hero` blocks without touching Twig.
card:
title: Real `.mud`
body: Registered before Grav page scan — not renamed Markdown.
:::
HTML output
Why fences exist
Declared structure
Sections are named — not guessed from H2 soup.
AI-safe edits
Agents patch ::: hero blocks without touching Twig.
Real .mud
Registered before Grav page scan — not renamed Markdown.
8. timeline
cmp-timeline
Roadmap / changelog
event: blocks with date and text.
.mud source
@@@
name: grav-official
layout: promo
@@@
::: timeline
title: Alpha roadmap
event:
date: Now
text: Flagship gravmud.site, Services pricing, this MUD-SPEC page.
event:
date: Next
text: Admin blueprint, Flex parity, shared parser with Code Designer.
:::
HTML output
Alpha roadmap
Flagship gravmud.site, Services pricing, this MUD-SPEC page.
Admin blueprint, Flex parity, shared parser with Code Designer.
9. compare
cmp-compare
Before / after table
row: blocks with left, right, optional highlight: true.
LAN preview: YouTube blocks in-page embeds on IP addresses — tap play to open the app.
11c. gallery / carousel
Image grid and featured-work carousel — no Twig, no page builder. List paths with optional captions (src | caption). Absolute paths (/user/pages/…) and external URLs both work.
cmp-gallery
Portfolio gallery
Responsive grid. Add lightbox="true" on the opening fence for click-to-enlarge.
.mud source
@@@
name: grav-official
layout: promo
@@@
::: gallery {columns="3" lightbox="true"}
title: Selected work
- https://picsum.photos/800/600?random=11 | Ink study
- https://picsum.photos/800/600?random=12 | Client commission
- https://picsum.photos/800/600?random=13 | Personal piece
:::
HTML output
Selected work
Ink studyClient commissionPersonal piece
cmp-carousel
Featured carousel
Hero reel with prev/next, dots, and optional autoplay (seconds). aspect defaults to 16/9.
Drop one under a hero band on spec pages, plugin docs, or promo landings.
13. Plugin fences (addons)
Core alpha documents portable layout fences on this page — hero, cards, gallery, ticker, embeds, and the rest.
Addon plugins register their own ::: fence types at compile time via onMudFenceRender (same hook as Forumz). They are not part of the alpha spec catalog; each plugin ships its own docs.
@@@
name: grav-official
layout: promo
@@@
::: manifesto
title: One paragraph pitch
body: |
Grav won by staying flat and fast. **Grav MUD** adds a design language layer without becoming a page-builder monolith — content stays text, layouts stay declared, themes stay CSS.
signoff: <strong>Grav MUD (Alpha)</strong> · <a href="/get-started">Get started</a>
:::
HTML output
One paragraph pitch
Grav won by staying flat and fast. Grav MUD adds a design language layer without becoming a page-builder monolith — content stays text, layouts stay declared, themes stay CSS.
Grav MUD (Alpha) · Get started
15. The ::: example fence
This entire reference page is built from ::: example blocks. Each entry declares:
title — human label
id — anchor for the table of contents
desc — short explanation
body: | — the .mud snippet to compile for the preview panel
caption — optional footnote
The compiler recursively runs body through the same pipeline as a full page (auto-wrapping @@@ grav-official when omitted).