🥧 MARKUPDOWN TUTORIAL
Bake your first .mud file · ::: render fences · ++ executable blocks
No mood boards. No boilerplate. Just docs you can ship, export, and generate code from.
Read MUD-SPEC v0.1 →
Fourteen mud pies — basics first, then ::: component blocks from MUD-SPEC v0.1. Work in order or jump to what you need.
Create a file named anything you like — hello.mud, canon.mud, inspired-cafe.mud. MarkUpDown is plain text. Code Designer adds syntax, preview, and export.
# hello.mud Welcome to MarkUpDown. This is Pie One. Save as hello.mud — the extension is the whole vibe.
Use # for titles and ## for sections — familiar if you know markdown, but MarkUpDown understands component structure for export and code generation.
# SexBox.Live Launch Canon ## Hardware Manifest - Raspberry Pi 5 node - Chromium kiosk on :3000 ## Network Ring - futurevision.live - homebrewz.live
MarkUpDown uses ++ to open executable documentation blocks — code that can render, export, or generate real files. This is where .mud beats plain markdown.
## Boot Pipeline ++ systemd unit snippet [Service] ExecStart=/usr/bin/node server.js WorkingDirectory=/opt/futurevision-sexbox ++ N.O.N. config fragment hub name "FutureVision Live" port 3000
Bullet lists for specs. Standard links for the network ring. In Code Designer, the WYSIWYG editor shows live preview as you type — flat 0ms feedback loop.
## Three Thrones - Physical: Officeworks Order 1830582929 - Digital: [flipzine.live](https://flipzine.live) - Shield: SoftRadix QA — Komal Garg team > Technology enables human beings to create.
One .mud file → HTML for the web, PDF for print, or generated code from templates. Same source as SexBox Entertainment Magazine and FlipZine brochure sync.
# Export targets (Code Designer) export html "dist/canon.html" pdf "print/canon.pdf" code "src/generated/" // DEPLOYED REALITIES ONLY
Presentation fences from MUD-SPEC v0.1 — layout, navigation, embeds, and forms. Pair with ++ for codegen.
::: vs ++::: fences render (hero, grid, forms). ++ blocks execute (N.O.N., systemd, export manifests). Never mix the semantics.
::: hero title: Mud Pies subtitle: Bake your first .mud file ::: ++ N.O.N. fragment hub name "FutureVision Live"
Page opener — eyebrow, title, subtitle, image, CTA row. Every .live microsite starts here.
::: hero eyebrow: SEXBOX.LIVE title: Four Thrones subtitle: Physical · Digital · Shield · Entertainment image: assets/hero.png cta: - [Demo](demo.html) - [FlipZine](https://flipzine.live) primary :::
Responsive columns for spec matrices, feature rows, and network ring tiles. Nest card blocks inside grid.
::: grid columns=3 gap=1.5rem responsive ::: card icon: 🌐 title: futurevision.live body: Sovereign multimedia hub ::: ::: card icon: 📖 title: flipzine.live body: Digital throne — magazine sync ::: :::
Auto-built from # headings — depth control, sticky sidebar option, or set toc: true in frontmatter.
--- title: Launch Canon toc: true --- ::: toc depth=3 sticky ::: ## Hardware Manifest ## Network Ring
Sandboxed iframe or raw HTML island — EmulatorJS, widgets, CRT viewports. Use sandbox for external URLs.
::: embed sandbox src: https://homebrewz.live/play.html height: 480 title: EmulatorJS Playground ::: ::: embed html <div class="crt-viewport" data-system="c64"></div> :::
Declarative fields → POST endpoint. Preset waitlist wires to Code Designer's waitlist API.
::: form contact action=/api/waitlist.php method=POST field name text label="Your name" required field email email label="Email" required field message textarea rows=4 submit: Join Waitlist ::: ::: waitlist submit: Join Waitlist :::
Admonitions for canon docs (canon, warning, tip) and full-width promo strips.
::: callout canon **Deployed realities only.** No vaporware in canon .mud files. ::: ::: cta title: Ready to get muddy? button: [Join Waitlist](waitlist.html) primary :::
Doc meta at the top, shared partials for FlipZine sync, named layout bands for export themes.
--- title: Inspired Cafe export: html: dist/inspired-cafe.html --- ::: include path: partials/network-ring.mud ::: ::: section alt id=cast ## Cast - Dr. D · Gemzy · Curs_y :::
Bonus blocks from the spec — gallery, tabs, timeline, diagram, Flip spread. See MUD-SPEC §5 for the full menu.
::: media src: assets/markupdown-hero.png caption: Author once. Export everywhere. ::: ::: marquee speed=slow SEXBOX.LIVE · HOMEBREWZ.LIVE · FLIPZINE.LIVE ::: ::: diagram mermaid graph LR mud[.mud] --> html[HTML] mud --> pdf[PDF] :::
Build my-first.mud with frontmatter, a ::: hero, a 3-column ::: grid of cards, one ::: callout canon, one ++ block, and a ::: waitlist. Compare your work to examples/mud-pies-demo.mud and the full MUD-SPEC v0.1.