Variables form

A variables form turns the {{name}} placeholders in a page's code examples into labelled inputs. Each input starts with the variable's declared default, and the code examples update as the reader types. Values stay in the browser: the component sets no cookie, writes no storage, and makes no request. Without JavaScript the form still shows every default, so the page reads correctly and a reader can copy the values by hand.

Syntax

::variables-form{id="quickstart"}

The component reads the N33 declaration shape from the page's front matter and site.data.variables, or from a JSON list in its variables prop. A code example uses the same variable in braces:

curl -H "Authorization: Bearer {{api_key}}" {{host}}/v1/status

Options

Name	Type	Default	What it does
id	string	variables-form	Prefix for the form's element ids. Give each form on a page its own id.
variables	JSON array	the page and site declarations	The whole list when present: '[{"name":"api_key","default":"YOUR_KEY"}]'. When it is absent or unreadable, the page's front matter and site.data.variables are used.

A declaration is {name, default?, type?}, the shape the engine's variables output documents. The page's declaration wins over the site's for the same name, and a page declaration without a default keeps the site's default. The form renders nothing when there is no variable.

Example

Variables

Fill these in to see your values in the code examples. They stay in your browser.

api_key

host

curl -H "Authorization: Bearer {{api_key}}" {{host}}/v1/status

Type in the form and the command follows. The literal placeholders show what the page looked like before a value was known; the form's islands fill them with the defaults when JavaScript runs.

Each example keeps the text the page author wrote, and every change is rendered from it: a placeholder split across highlighting spans still changes as a whole, and unrelated text that happens to equal a default or the value typed before it is never rewritten.

Notes

• The form is a <fieldset> with a legend, one visible label per variable, and a hint that values stay in the browser.
• Each input's default is both its value and its placeholder, so the form is complete without JavaScript.
• Changing a variable marks a recorded :::output-block that depends on it stale; the recorded text is never rewritten. Freshness follows the values: when every variable the output depends on is back at the value the form started with, whether by typing or by Reset, the stale marker and its note are cleared. A dependency no form on the page holds gives no trustworthy baseline, so the output keeps the state it has; the island never infers freshness it cannot check.
• Focus is visible, and every style uses design tokens and logical properties, so right-to-left pages and dark mode follow.
• The legend and hint are localized through the theme's interface strings.