Decorator Explorer

Render the row as a prominent hero card.

revenue = $8,400
costs = $5,200
profit = revenue - costs // @hero @prefix($)

Highlight the row with the accent color.

revenue = $8,400
costs = $5,200
profit = revenue - costs // @prefix($)
margin = profit / revenue * 100 // @accent @suffix(%) @label(Gross margin)

Hide behind the "Advanced" disclosure by default.

price = $49
units = 1,200
revenue = price * units // @hero @prefix($)
tax_rate = 7% // @advanced

Hide the row from present mode (still computed).

cash = $500,000
burn = $45,000
runway = cash / burn // @hero @suffix(months)
tax_rate = 7% // @hidden

Treat the row as a derived display, not an editable parameter.

list_price = $59 // @readonly @label(List price)
your_price = $49 // @label(Your price)

Override the row label.

w = 72 // @label(Body weight) @suffix(kg)

Display this string before the value.

budget = 5000 // @prefix($) @label(Budget)

Display this string after the value.

distance = 42 // @suffix(km)
pace = 5.5 // @suffix(/km) @label(Pace)

Icon name to display alongside the row.

deadline = 14 // @suffix(days) @icon(clock)
budget = $5,000 // @icon(wallet)

Tooltip shown when hovering the row.

margin = 38% // @tooltip(Revenue minus cost, divided by revenue) @label(Gross margin)

Helper text shown next to the row.

apr = 6.5% // @note(Compounded monthly) @label(Interest rate)

Attach an Explain button to the row: @explain(your words), or bare @explain to use the engine's auto-intuition.

a = 3
b = 4
c = sqrt(a^2 + b^2) // @hero @explain(Pythagoras: the hypotenuse of a right triangle)

Alias of @spark — inline unicode bar chart for a list-valued row (CLI TUI).

Show an inline "Report a bug" card for this row: bare @bug opens it empty, @bug(text) prefills the note. Calc view only (snapshots diagnostics + uploads a report); stripped in present mode and embeds.

Render a list-valued row as an inline unicode sparkline (CLI TUI).

Convert the row's result INTO this unit for display: @unit(cm) shows the computed result in cm (a sticky, row-level `to cm`). Errors if the result's dimension can't convert to the target. Distinct from an inline input unit (10 cm), which declares the value's own dimension.

Turn a number into a draggable slider. (A range like `1..100` works too.)

budget = 5000 // @slider(1000, 20000, 500) @prefix($) @label(Monthly budget)

Pick the value from a dropdown.

price = 20 // @dropdown(10, 20, 40) @prefix($) @label(Plan price)

On/off switch that makes any input optional — on, the value is used; off, the variable is false. Composes with a slider/dropdown/number.

steel_fiber = 110 // 10..110 by 10 @toggle(on) @suffix(%) @label(Steel Fiber)

Radio-button group — one choice at a time.

size = "M" // @radio(S, M, L) @label(Shirt size)

Segmented button group.

tier = "Pro" // @buttons(Free, Pro, Max) @label(Tier)

A single checkbox for a true/false value.

agree = false // @checkbox @label(I agree to the terms)

Multi-select checklist.

An input control — try it live in a full calc; it needs a list value to bind to.

Multi-select dropdown.

An input control best seen in a full calc with a list value.

Type-ahead dropdown.

An input control best seen in a full calc.

Selectable image cards.

An input control that needs image options — see it in a full calc.

Date picker.

start = 2026-01-15 // @date @label(Start date)

Time picker.

An input control — bind it to a time value in a full calc.

Combined date + time picker.

An input control — bind it to a datetime value in a full calc.

Alias-style range control (same idea as @slider).

zoom = 100 // @range(50, 200, 10) @suffix(%) @label(Zoom)

Marks a value as reader-scrubbable in ic.js “live prose” embeds.

For the ic.js prose embed only — the calc engine treats it as an inert comment. See the Sharing guide.

The @clamp decorator.

Reveal the row formula in present mode (raw syntax; add @latex to typeset).

# Pythagoras
a = 3
b = 4
c = sqrt(a^2 + b^2) // @hero @formula

Modifier on @formula: render the revealed formula as typeset LaTeX instead of raw syntax.

principal = $10,000
rate = 6%
years = 10
balance = principal * (1 + rate) ^ years // @hero @prefix($) @formula @latex

Show an inline engine debug table for this row (calc view only; stripped in present mode and embeds).

Calc view only — deliberately stripped from Present mode and embeds (including this preview).

Mark this row as a section header with the given title.

# Inputs
amount = $400,000
rate = 7%
# Result
total = amount * (1 + rate) // @hero @prefix($)

Section is collapsed by default in calc view.

# Summary
total = $466 // @hero @prefix($)
# Details @collapsed
compute = $364 // @prefix($)
storage = $57 // @prefix($)
egress = $45 // @prefix($)

Present-mode flag: paint a faint magnitude bar behind each readout row (width ∝ value ÷ section-max). Composes with any @skin. See present-skins/bars.css.

# Monthly spend @bars
rent = $1,800
groceries = $620
transit = $140
fun = $360

Present-mode row density for a section: @density(compact|dense). Tighter spacing for theorycraft-style input panels. Absent = inherit global/inferred.

# Controls @density(compact)
a = 1
b = 2
c = 3
d = 4

Present-mode visual skin for a section: @skin(<name>) selects a scoped CSS experiment (e.g. spec-sheet). Absent = the theme default look.

Selects a scoped CSS experiment (e.g. spec-sheet). Best seen applied to a full calc.

Bento display surface for a section: @as(calc|text|graph|present|table|note). Overrides content inference. note (aka markdown/md) = a Note: markdown with {…} live interpolation.

Takes effect in Bento view — open a calc as a dashboard to see it.

Show row-number labels for this section in Bento (dashboard) mode. Off by default.

Bento (dashboard) view only.

Column headers for @layout(table): @cols(item, machines, belts, MW). First labels the item column; the rest label each array-value metric column in order.

items = [{name: "Rent", amt: 1800}, {name: "Food", amt: 600}] // @sheet @cols(Item, Amount)

Calc-level flag: this calc is a dashboard — open it in Bento (dashboard) view by default. An explicit ?view= deep-link still overrides.

A document-level directive — its effect is the default view, not a per-row visual.

Legacy: make a row/section span half the width.

Legacy layout decorator.

Legacy: one-third width.

Legacy layout decorator.

Legacy: full/extra width.

Legacy layout decorator.

Legacy: two-column section.

Legacy layout decorator.

Legacy: column span.

Legacy layout decorator.

Legacy: split inputs/outputs layout.

Legacy layout decorator — the Present settings “Split” layout is the modern equivalent.

Legacy: render as a card.

Legacy layout decorator.

Legacy: tabbed section.

Legacy layout decorator.

Legacy: choose a section/calc layout. The Present settings menu exposes the same options.

Legacy layout decorator.

Per-column config for a @sheet: @col(Label [as verb | to N decimal places] [, width: N]). One decorator per column, keyed by name; the additive rich form of @cols. Wins over @cols for the column it names.

timesheet = [{task: "Design", hours: 8, wage: 20}, {task: "Build", hours: 12, wage: 20}] // @sheet @col(Task) @col(Hours to 1 decimal place) @col(Wage as money)

Render an array-of-objects (or empty `[]` + @cols) row as an editable spreadsheet grid: typed cells, +Add row, delete, a per-numeric-column aggregation footer (Σ / avg / count), and sortable headers. The named, configurable elevation of the inferred @editable grid. Pairs with @cols (column labels) and @sort (default view sort).

items = [{name: "Rent", amt: 1800}, {name: "Food", amt: 600}, {name: "Transit", amt: 120}] // @sheet @cols(Item, Amount) @totals

Default VIEW sort for a @sheet: @sort(<col> asc|desc). Reorders the rendered rows only — never the underlying data (the engine cannot sort a labeled table: sort([{…}]) returns []). Clicking a column header rewrites this decorator so the sort persists in the share URL.

items = [{name: "Rent", amt: 1800}, {name: "Food", amt: 600}, {name: "Transit", amt: 120}] // @sheet @cols(Item, Amount) @sort(amt desc)

Show the @sheet aggregation footer: a Σ row totaling each numeric column plus a row count. Off by default (a sheet is just data + Add row); toggled on from the table config panel, which writes this flag into the row text so it persists in the share URL.

items = [{name: "Rent", amt: 1800}, {name: "Food", amt: 600}, {name: "Transit", amt: 120}] // @sheet @cols(Item, Amount) @totals

View-only row filter for a @sheet: @filter(<col> <op> <value>), op ∈ > >= < <= = != contains. Hides non-matching rows in the rendered grid only — the underlying data is unchanged (distinct from the engine filter() function). Set from the config panel; persists in the share URL.

items = [{name: "Rent", amt: 1800}, {name: "Food", amt: 600}, {name: "Transit", amt: 120}] // @sheet @cols(Item, Amount) @filter(amt > 500)

Custom @sheet summary footer rows: @summary(<arrayVar>) references an array-of-objects the author BUILDS with normal calc rows (summaries = [{label: "Total", qty: sum(map(items, r => r.qty))}, …]). The grid renders one footer row per object — `label` (or the first column) is the left cell, every other key lands in its column. Fully programmable (conditional / generated / reactive), not a typed-in mini-language. Repeatable for multiple summary blocks; beyond the single built-in Σ footer (@totals).

References an array you build with normal calc rows — best seen in a full calc.

Override the x-axis label on a graph/plot row.

wave = plot sin(x) // @xlabel(angle) @ylabel(sine)

Override the y-axis label on a graph/plot row.

wave = plot sin(x) // @xlabel(angle) @ylabel(sine)

Draw the outer rectangular frame around a graph/plot row.

wave = plot cos(x) // @frame @xlabel(x) @ylabel(cos x)

Force frameless (axis-only) rendering on a graph/plot row (also the default).

wave = plot cos(x) // @no-frame @xlabel(x) @ylabel(cos x)

Evaluate trig functions in radians (default is degrees).

@radians
theta = pi / 4
height = sin(theta) // @hero @label(sin(π/4))

Legacy: hint a visual theme for the calc.

Legacy layout decorator — the same options live in the Present settings menu.

Legacy: set the calc’s content width.

Legacy layout decorator.

Legacy: calc-wide number format.

Legacy layout decorator — see the Number Formatting guide.

Legacy: default decimal places.

Legacy layout decorator.

Verification verdict on the # Title line: @verified(tier:by:date), tier = ai_reviewed|human_verified|tested. Drives the gallery trust badge.

Gallery metadata — no visual row effect.

Inline test case on a comment row: @expect(name=value, …). Sets input rows, asserts computed rows render the given display. Runs in CI.

Testing directive — no visual effect.

Authoritative reference for the calc's math on the # Title line: @source(url) or @source(Name). Populates Provenance.source; the AI review cross-checks the calc against it.

Gallery/provenance metadata — no visual row effect.