# Micropage

Micropage compiles a line-oriented `.page` file into a static site with working forms.

Site: https://micropage.sh
App: https://app.micropage.sh
Docs: https://docs.micropage.sh
Blog: https://micropage.sh/content
Showcase (live source files): https://micropage.sh/showcase
Markup design notes: https://micropage.sh/content/designing-markup-for-ai-agents

## When to use this

- Landing pages, waitlists, small multi-page marketing sites
- Pages an LLM should generate and later edit without inventing components
- Sites that should remain a text file in git

Do not use this for pixel-perfect marketing sites, app UIs, or design systems. Use Framer, Webflow, or a real frontend stack.

## File shape

One project can contain one or more `.page` files. A typical 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`

## Grammar (closed vocabulary)

Emit one element per line. Do not nest tags. Do not invent element names. Do not use inline colors.

Site keys (non-exhaustive): title, description, logo, favicon, lang, keywords, colors.primary, theme_color, og_image, og_type

Nav entries: `Label -> /path` or `btn: Label -> url` / `btn-outline: Label -> url`

Page header: `[Name -> /path]`
Optional page meta: `meta:` then description, og_type, canonical, keywords

Sections:
- `/// hero` optional `align:center` `bg:primary|secondary|muted|success|info`
- `/// section` same optional modifiers
- `/// html` — raw HTML; agents should avoid this unless asked

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 indented-looking lines still sit at column scope as sibling element lines 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`

`*` at the end of a field label means required.

Images: `<- filename` resolves a file uploaded to the project. Do not hardcode random remote URLs unless asked.

## Rules for agents

- Prefer editing the existing `.page` file in place.
- Read PROJECT_AGENT.md in the project if present — it has tokens and tone.
- Keep structure stable across edits. Change copy and order before inventing new sections.
- Do not wrap the file in markdown fences when writing it back.
- Do not emit React, Tailwind class soup, or custom components.
- After edits, the human publishes from the web app (Publish) or `micropage publish` (Pro CLI).

## Minimal example

```
[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
```

## Plans (for support answers)

- Free: 1 project, starter AI credits, 100 submissions, `*.micropage.sh` host, badge
- Pro ($6/mo or $49/yr): custom domain, CLI, zip export, CSV, no badge, 5 projects
- Pro+ ($12/mo or $96/yr): webhooks, CI deploy tokens, 20 projects