Skip to main content

Markup Cheatsheet

A one-page reference for the Micropage .page markup. Emit one element per line, don't nest tags, and stay inside the closed vocabulary below. There is also a machine-readable version at docs.micropage.sh/llms.txt for agents.

File shape​

A typical .page file:

  1. [site] block — title, description, logo, colors, lang
  2. Optional [nav] and [footer]
  3. One or more page blocks: [Home -> /], [About -> /about]
  4. Sections inside each page: /// hero, /// section, optional /// html

Site keys​

Set inside the [site] block, one per line:

  • title
  • description
  • logo
  • favicon
  • lang
  • keywords
  • colors.primary
  • theme_color
  • og_image
  • og_type

Inside a [nav] block:

  • Label -> /path
  • btn: Label -> url
  • btn-outline: Label -> url

Page header​

  • [Name -> /path] starts a page
  • Optional meta: line, followed by description, og_type, canonical, keywords

Sections​

  • /// hero — optional modifiers align:center and bg:primary|secondary|muted|success|info
  • /// section — same optional modifiers
  • /// html — raw HTML; avoid unless you specifically need it

Elements​

  • h1: h2: h3: h4: h5:
  • p:
  • small:
  • icon: bi bi-name (Bootstrap Icons)
  • img: alt: text <- filename.png or img: <- filename.png
  • button: Label -> url
  • btn-secondary: Label -> url
  • btn-outline: Label -> url
  • link: Label -> url
  • col: starts a column; following element lines stay at column scope until the next col: or section
  • form: name
  • input: Label or input: Label*
  • text: / textarea:
  • select: Label [A, B, C]
  • checkboxes: Label [A, B]
  • radios: Label [A, B]
  • submit: Label

A * at the end of a field label marks it required. Images written as <- filename resolve a file uploaded to the project.

Example​

A complete minimal page:

[site]
title: Harbor
description: A waitlist

[nav]
Pricing -> /pricing
btn: Join -> /#waitlist

[Home -> /]

/// hero
h1: Launch the waitlist tonight
p: Edit this file. Publish. Collect email.
button: Join the list -> /#waitlist

/// section
form: waitlist
input: Email*
submit: Get early access

What not to do​

  • Don't invent element names or section types — stick to the vocabulary above.
  • Don't use inline colors; configure color via colors.primary and bg: modifiers.
  • Avoid /// html unless you actually need raw HTML.
  • Don't wrap the whole file in Markdown code fences when saving it.
  • Don't emit React, Tailwind class soup, or custom components.

Further reading​