Pages, components and layouts
Every page is structured data. Use the same components in JSON or through ctx.page builders.
On this page
The document envelope
version must be 1. title labels the document; children is the ordered array of components to render. The link in this example needs a corresponding about.json page. JSON uses double quotes and does not allow comments or trailing commas.
{
"version": 1,
"title": "My first site",
"children": [
{
"type": "heading",
"text": "Hello, other worlds!"
},
{
"type": "paragraph",
"text": "My own corner of the network."
},
{
"type": "link",
"text": "About this site",
"href": "/about.json"
}
]
}Component reference
Use only documented properties for the component you are building. The Hub rejects unknown properties. HTML attributes, CSS styling, onClick handlers and browser-side scripts do not apply.
| Type | Properties | Behavior |
|---|---|---|
| heading | text | Emphasized heading and spacing |
| paragraph | text | Wrapped body text |
| list | items: string[] | Bulleted list |
| link | text, href | Navigable same-site or Lantern address |
| image | rows: string[], text? | Palette pixel art; text is a description |
| section | children | Groups components vertically |
| columns | children | Each child is a column; stacks on narrow terminals |
| form | action, children | Submits fields with POST |
| input | name, text?, password? | Text field; optional masking |
| checkbox | name, text? | Boolean field |
| select | name, text?, options | Choice from an array of strings |
| submit | text? | Submits the surrounding form |
Responsive columns
Columns stack automatically on small terminals. The current renderer uses columns at content widths of at least 44 characters when there is enough room for every column. Keep each column readable on its own.
{
"type": "columns",
"children": [
{
"type": "section",
"children": [
{
"type": "heading",
"text": "ABOUT"
},
{
"type": "paragraph",
"text": "A mountainside workshop."
}
]
},
{
"type": "section",
"children": [
{
"type": "heading",
"text": "PROJECTS"
},
{
"type": "list",
"items": [
"Railway",
"Observatory"
]
}
]
}
]
}Terminal pixel art
Each character is a CC palette index: 0 white, 1 orange, 2 magenta, 3 light blue, 4 yellow, 5 lime, 6 pink, 7 gray, 8 light gray, 9 cyan, a purple, b blue, c brown, d green, e red, f black. A space is transparent. Wide images are clipped to the available width; keep essential art small. Monochrome computers use character marks instead of color.
{
"type": "image",
"text": "A small lantern",
"rows": [
" 111 ",
"14441",
" 444 ",
" 111 "
]
}Links and navigation
Lantern is not an ordinary web browser: https:// links are not supported page navigation. Use text to tell visitors where to open an external web address. Relative page paths are rooted at the site, not the current document’s directory.
| href | Destination |
|---|---|
| /about.json | Another page on the current site |
| hub://help/ | Official help on the Hub |
| ln://my-site/ | A nearby modem site |
Found a mismatch? Include the exact error, runtime version and a small example with secrets removed.