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 indented description, og_type, canonical, keywords, lang, translation
  • lang: ro sets the page language (default: the site lang, else en); translation: en -> /about links a translated version and can repeat. See Multilingual Sites

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: — the rest of the line is literal text
  • small:
  • - item — unordered list item; 1. item — ordered list item (starts at the first number)
  • table: Caption (optional), then | A | B | rows; the first row is the header
  • 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
  • link: Label <- file.pdf or link: <- file.pdf — links to a file uploaded to the project
  • 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
  • success: Message
  • newsletter: true or newsletter: false

A * at the end of a field label marks it required. It renders as a red asterisk after the label, and a form with at least one required field also renders a * indicates a required field key above its fields. Images written as <- filename resolve a file uploaded to the project.

Consecutive list lines form one list; a blank line or switching between - and 1. starts a new one. Lists don't nest. To write a paragraph that starts with - or 2024. , use p:. In tables the |---| separator row is optional, \| writes a literal pipe, and cells are plain text. See Lists & tables.

success: sets the confirmation shown after a successful submission; without it a form shows Thank you. Your message was sent. and a newsletter form shows Thank you. You're subscribed.. newsletter: only picks between those two wordings (and hides the Submit again button) — subscriber capture is turned on per form in the editor, never from markup.

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​