Packs
Device components
The device pack's 10 components: the device's own hardware and apps: maps, camera, scanning, location, files, contacts, the calendar, sharing, voice notes and QR codes. Native on every platform, with a web fallback that needs no JavaScript.
Add it with packs: ["device"], or leave packs out for every pack.
Map
Places on a map; add one whenever the answer suggests places to go (a trip, places to eat, walks), even when not asked for a map. A Markdown table inside: the place first, then its Lat and Lng (an Address only for a place you can't locate), then anything else; route draws a path through them in order.
Between its tags: a Markdown table (first column labels, the others series).
| Attribute | Type | Required | Values |
|---|---|---|---|
title |
text | ||
route |
true or false |
- Time Out MarketFood hall
- Pastéis de BelémSince 1837
- Taberna Sal GrossoBook ahead
<Map title="Where to eat">
| Place | Lat | Lng | Note |
|---|---|---|---|
| Time Out Market | 38.7069 | -9.1459 | Food hall |
| Pastéis de Belém | 38.6975 | -9.2032 | Since 1837 |
| Taberna Sal Grosso | 38.7111 | -9.1290 | Book ahead |
</Map>Camera
A form field that takes a photo with the camera.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
facing |
one of | back (default), front |
|
multiple |
true or false | ||
hint |
text | ||
required |
true or false |
<Form name="claim">
<Camera label="Photo of the damage" name="photo" hint="Include the whole parcel" required="true" />
<Button>Send claim</Button>
</Form>Scan
A form field filled by scanning a barcode or QR code.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
kind |
one of | any (default), qr, barcode |
|
hint |
text | ||
required |
true or false |
<Form name="checkin">
<Scan label="Scan your boarding pass" name="pass" kind="barcode" />
<Button>Check in</Button>
</Form>Location
A form field holding the user's location once they choose to share it.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
precision |
one of | approximate (default), precise |
|
hint |
text | ||
required |
true or false |
<Form name="pickup">
<Location label="Where should we pick you up?" name="where" precision="precise" required="true" />
<Button>Request a ride</Button>
</Form>File
A form field for attaching files.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
accept |
values split by ` | ` | |
multiple |
true or false | ||
hint |
text | ||
required |
true or false |
<Form name="apply">
<File label="CV and cover letter" name="docs" accept=".pdf | .docx" multiple="true" />
<Button>Apply</Button>
</Form>Contact
A form field: a person picked from the user's contacts.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
hint |
text | ||
required |
true or false |
<Form name="invite">
<Contact label="Invite a friend" name="friend" />
<Button>Send invite</Button>
</Form>AddToCalendar
A button that adds an event to the user's calendar; the button's label between the tags.
Between its tags: inline text: its label.
| Attribute | Type | Required | Values |
|---|---|---|---|
title |
text | yes | |
start |
text | yes | |
end |
text | ||
where |
text | ||
note |
text |
<AddToCalendar title="Dinner at Taberna Sal Grosso" start="2026-10-24T19:30" end="2026-10-24T22:00" where="Calçada do Forte 22, Lisbon">Add to calendar</AddToCalendar>Share
A button that opens the share sheet with this text or link; the button's label between the tags.
Between its tags: inline text: its label.
| Attribute | Type | Required | Values |
|---|---|---|---|
text |
text | ||
href |
address |
<Share text="Three days in Lisbon, the plan" href="https://example.com/trip">Share the plan</Share>VoiceNote
A form field: the user records a short voice note.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
label |
text | yes | |
name |
text | ||
max |
number | ||
hint |
text | ||
required |
true or false |
<Form name="update">
<VoiceNote label="Record a voice update" name="note" max="60" />
<Button>Send</Button>
</Form>QR
A QR code for a link or short text, for another phone to scan.
Between its tags: nothing: it closes itself (<Name ... />).
| Attribute | Type | Required | Values |
|---|---|---|---|
value |
text | yes | |
label |
text |
<QR value="WIFI:T:WPA;S:Guest House;P:correct horse battery;;" label="Join the guest Wi-Fi" />