Presentation Mode

Every calculator has three views: Calc (spreadsheet), Text (plain text), and Present (clean, shareable). Click the Present tab to switch.

Present mode hides the editing UI and shows your calculator as a polished, interactive document. Inputs become sliders and controls, results become hero cards, and sections become collapsible groups.

Try it: the calc below is live — drag the slider and watch the hero card update.

How decorators work

Decorators are the magic of Present mode. A decorator is a @word (optionally with an argument in parentheses) that controls how a row appears. Write them after // at the end of any row:

runway = cash / burn_rate // @hero @suffix(months)

Three things to know:

• The engine is smart about defaults. $500,000 automatically gets a $ prefix, 7% gets a % suffix, and simple assignments like cash = $500,000 are detected as inputs. You only need decorators to override the defaults.
• Combine freely. Stack as many as you like: runway = ... // @hero @icon(clock) @suffix(months).
• Bare decorators work anywhere on the row. @hero runway = ..., runway = ... @hero, and runway = ... // @hero are all equivalent — Instacalc normalizes them. Handy for quick edits.

The rest of this guide walks through every decorator by category. There’s a full reference table at the bottom — and the Decorator Explorer lets you browse every decorator with a live, editable example of each.

Emphasis & visibility

These control how much weight a row carries — and whether it shows at all.

Decorator	Effect
@hero	Large, prominent hero card. Use it on your “answer” row.
@accent	Highlight the row in the theme’s accent color.
@advanced	Tuck the row behind a Show Advanced disclosure.
@hidden (or @hide)	Compute the row but never show it — perfect for intermediate values.
@readonly	Render as a fixed display rather than an editable input.

@hero, @advanced, and @hidden are primary modes — a row picks one. @accent and @readonly compose on top of any of them.

Labels, units & annotations

Rename rows, add units, and attach help text.

Decorator	Effect
@label(text)	Override the row’s label.
@prefix(sym)	Display sym before the value (e.g. @prefix($)).
@suffix(sym)	Display sym after the value (e.g. @suffix(months), @suffix(%)).
@icon(name)	Show a Lucide icon beside the row (e.g. @icon(clock)).
@tooltip(text)	Help text shown when hovering the row.
@note(text)	Helper text shown inline next to the row.
@explain / @explain(text)	Add an Explain button. Bare @explain uses the engine’s auto-generated intuition; @explain(your words) shows your own explanation.

Input controls

Turn a plain number into an interactive control. In Present mode a reader can drag, pick, or toggle — and every result recomputes live.

Slider shorthand. Instead of @slider(min, max, step) you can write a human-readable range in the comment. These are all sliders:

qty = 1 // 1..100
speed = 30 // mph 1..200 by 5
growth = 5% // % 0.5..30 by 0.1

The optional leading text becomes the suffix, and by sets the step (auto-inferred if omitted). See Graphing for sliders that drive a live plot.

All control types:

Control	Renders as
@slider(min, max, step)	Draggable slider.
@dropdown(a, b, c)	Single-select dropdown.
@toggle	On/off switch (boolean).
@radio(a, b, c)	Radio-button group.
@buttons(a, b, c)	Segmented button group.
@checkbox	Single checkbox.
@checklist(a, b, c)	Multi-select checklist.
@multiselect(a, b, c)	Multi-select dropdown.
@combobox(a, b, c)	Type-ahead dropdown.
@image-cards(...)	Selectable image cards.
@date / @time / @datetime	Date/time pickers.

(For embeddable “live prose” on your own site, @drag(min, max, step) marks a scrubbable inline value — see Sharing & Embeds.)

Showing the math

By default Present mode shows results, not formulas. These decorators reveal the underlying math — great for teaching and worked examples.

Decorator	Effect
@formula	Reveal the row’s formula. Renders as raw Instacalc syntax by default (teaches the exact keystrokes).
@latex	Modifier on @formula — typeset the revealed formula as LaTeX instead of raw syntax.
@debug	Show an inline engine debug table for the row. Calc view only; stripped from Present mode and embeds.

Put @formula on a # Section header (or the calc title) to reveal formulas for every row in that section at once.

Sections & layout

Use markdown headers (#, ##, ###) to organize rows into groups. In Present mode each section becomes a card.

Decorators on a header apply to the whole section:

Decorator	Effect
@collapsed	Section starts collapsed.
@bars	Paint a faint magnitude bar behind each readout (width scales with the value).
@density(compact) / @density(dense)	Tighter row spacing for input-heavy panels.
@skin(name)	Apply a scoped visual skin to the section (e.g. @skin(spec-sheet)).
@rownums	Show row-number labels (Bento/dashboard view).
@as(surface)	In Bento view, force how a section renders: @as(calc), @as(text), @as(graph), @as(present), @as(table), or @as(note).

Section-level flags like @bars can also go inline on the header:

Add @dashboard anywhere in a calc to open it in Bento (dashboard) view by default.

Data tables

A row whose value is an array of objects can render as an editable spreadsheet grid with @sheet. Readers can edit cells, add and delete rows, and sort by clicking headers.

Decorator	Effect
@sheet	Render an array-of-objects row as an editable grid.
@cols(a, b, c)	Column headers, in order.
@sort(col asc\|desc)	Default view sort. Clicking a header rewrites this so the sort persists in the share URL.
@totals	Show a Σ footer totaling each numeric column, plus a row count.
@filter(col op value)	View-only filter (op is one of > >= < <= = != contains). Hides non-matching rows without changing the data.
@summary(arrayVar)	Custom footer rows built from another array-of-objects row. Repeatable.

Graphs

plot / graph rows get sensible auto-labeled axes. Override or reframe them with:

Decorator	Effect
@xlabel(text)	Override the x-axis label.
@ylabel(text)	Override the y-axis label.
@frame (or @framed)	Draw the outer rectangular frame around the plot.
@no-frame	Force frameless (axis-only) rendering — this is also the default.

See the Graphing guide for the full plotting story.

Calc-wide options

A few decorators affect the whole calc no matter which row carries them:

Decorator	Effect
@radians (or @radian)	Evaluate trig functions in radians (default is degrees).
@dashboard	Open the calc in Bento (dashboard) view by default.

Instacalc also recognizes several older layout decorators — @width, @half, @third, @wide, @col2, @split, @layout(...), @format, @decimals, @card, @theme — which map to the same options exposed in the settings menu below.

Settings menu

Click the gear icon in the Present toolbar to access the settings menu. Everything here is also reachable through decorators, but the menu is the fastest way to explore.

Layout — control how rows are arranged. The common modes:

• Auto — best layout chosen for you (default)
• Grid / Grid (3-col) — 2 or 3 column grid
• Bento — mixed-size cards, visually interesting
• Split — inputs on the left, outputs on the right

More modes are available (Rows, Form, Inline, Split I/O, Tabbed, Toolbar). Presentation mode is still in beta — the layout and styling options are evolving.

Tools:

• X-Ray — toggle to show/hide formulas behind each result
• Edit — jump back to the calc editor

Decorator reference

Every presentation decorator at a glance.

Decorator	Category	Effect
@hero	Emphasis	Prominent hero card.
@accent	Emphasis	Highlight in the accent color.
@advanced	Emphasis	Hide behind the Advanced disclosure.
@hidden / @hide	Emphasis	Computed but not shown.
@readonly	Emphasis	Fixed display, not editable.
@label(text)	Annotation	Override the row label.
@prefix(sym)	Annotation	Text before the value.
@suffix(sym)	Annotation	Text after the value.
@icon(name)	Annotation	Lucide icon beside the row.
@tooltip(text)	Annotation	Hover help text.
@note(text)	Annotation	Inline helper text.
@explain / @explain(text)	Annotation	Explain button (auto or custom).
@slider(min, max, step)	Control	Draggable slider.
@dropdown(...)	Control	Single-select dropdown.
@toggle	Control	On/off switch.
@radio(...)	Control	Radio group.
@buttons(...)	Control	Segmented buttons.
@checkbox	Control	Single checkbox.
@checklist(...)	Control	Multi-select checklist.
@multiselect(...)	Control	Multi-select dropdown.
@combobox(...)	Control	Type-ahead dropdown.
@image-cards(...)	Control	Selectable image cards.
@date / @time / @datetime	Control	Date/time pickers.
@formula	Math	Reveal the raw formula.
@latex	Math	Typeset the revealed formula.
@debug	Math	Inline engine debug table (calc view).
@collapsed	Section	Section starts collapsed.
@bars	Section	Magnitude bars behind readouts.
@density(compact\|dense)	Section	Tighter row spacing.
@skin(name)	Section	Scoped visual skin.
@rownums / @rownum	Section	Row-number labels (Bento).
@as(surface)	Section	Force Bento render surface.
@sheet	Table	Editable spreadsheet grid.
@cols(...)	Table	Column headers.
@sort(col asc\|desc)	Table	Default view sort.
@totals	Table	Σ footer + row count.
@filter(col op value)	Table	View-only row filter.
@summary(arrayVar)	Table	Custom footer rows.
@xlabel(text)	Graph	X-axis label.
@ylabel(text)	Graph	Y-axis label.
@frame / @framed	Graph	Outer plot frame.
@no-frame	Graph	Frameless (default).
@radians / @radian	Calc-wide	Trig in radians.
@dashboard	Calc-wide	Open in Bento view.

See also

• Decorator Explorer — browse every decorator with a live, editable example
• Sharing & Embeds — share links, embeds, and live-prose @drag
• Graphing — plots, sliders, and axis labels
• Themes — colors and typography
• Full Reference — every function, operator, and format