AINP Cheatsheet

One-page syntax quick reference — all 15 capabilities, minimal examples. Print it / pin to wall / embed in IDE auto-complete. Detailed docs in each capability page.

Static visual blocks (5)

Callout

> [!INFO]      | [!WARN]    | [!ZEN]      ← Rho MD native
> [!NOTE]      | [!TIP]     | [!IMPORTANT]
> [!WARNING]   | [!CAUTION]                ← GFM compatible
> body

Details →

Layout grid + cards

```layout grid cols=N            ← N: 1-6
:::card accent=COLOR              ← blue/red/green/yellow/purple/gray
content
:::
```

Details →

Annotate

```annotate
body text here
---
START-END|COLOR|LABEL              ← 0-based half-open, Unicode codepoint
4-9|red|adjective
10-15|blue|noun
```

Details →

Timeline

```timeline
:::event date=DATE title=TITLE accent=COLOR
body
:::
```

Details →

STL syntax highlight

```stl
[Source] -> [Target] ::mod(key=value, key=value)
# comment
```

Details →

Interactive blocks (4)

Tabs

```tabs default=TITLE
:::tab title=TITLE
content
:::
```

Details →

Stepper

```stepper linear=true|false
:::step title=TITLE optional=true|false disabled=true|false
content
:::
```

Details →

Modal

```modal trigger="text" width=SIZE
content
```

SIZE: small / medium / large / full Details →

Interact (controls + template)

```interact
namespace NAMESPACE                          ← optional; own line, first in body
slider name range=A..B step=S default=V label="..."
timer name range=A..B step=S speed=FPS loop=true|false
input name default="..." placeholder="..." label="..."
chip name options=a,b,c default=a label="..."
select name options=a,b,c default=a label="..."
toggle name default=true label="..."
computed name = expression
template <stl|vega-lite|svg|any text lang>:
  body with {expr} placeholders
```

Details →

Computed + animation (3)

Computed

computed varName = expression

See mini DSL below. Details →

Timer

timer name range=A..B step=S speed=FPS loop=true|false

loop=true (default) wraps around at B; loop=false runs a single pass and stops. Details →

SVG scenes

template svg:
<svg viewBox="0 0 100 100">
  <element attr="{expr}" />
</svg>

Allowed: rect / circle / line / path / text / g / defs / animate Forbidden: script / foreignObject / on* / external href Details →

Vega-Lite live chart

template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.1, "as": "x"}},
  "transform": [{"calculate": "sin({freq} * datum.x)", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative"}}
}
  • Numeric fields: {var} (no quotes)
  • String fields: "{var}" (with quotes) Details →

Composition (2)

Shared state (namespace)

```interact
namespace finance
slider rate range=0..0.15 step=0.01 default=0.05
```

```interact
namespace finance
template stl: [Rate] -> [{rate}]      ← reuses finance namespace
```

namespace is a body line (the first one) — never an argument on the fence line. Details →

Nested DSL

Any structural container (callout / layout / tabs / stepper / modal / timeline) can hold any DSL block — including other containers + interact. Don't nest: tabs in tabs / stepper in stepper / interact in interact (use namespace instead). Details →

Mini DSL (inside {} placeholders)

Arithmetic / comparison / logical

+  -  *  /  %  ^  (** also works for power)
==  !=  <  >  <=  >=
&&  ||  !
cond ? a : b               ← Ternary (replaces if/else)
'text'                     ← Single-quoted strings inside {}
[a, b, c]                  ← Array literal (for select(i, [...]))

Functions (complete whitelist)

abs sqrt cbrt pow exp ln log log2 log10
sin cos tan asin acos atan atan2
round floor ceil trunc sign
min max sum avg clamp mod
lerp mix smoothstep
deg rad
if select
concat len upper lower

Constants

pi   e   tau   inf   nan

Number output

There are no format specifiers — {expr} is the only placeholder form. Numbers auto-format: integers plain, floats to ~6 significant digits.

{round(x, 2)}            2 decimals
{round(x)}               integer
{round(x*100, 1)}%       percent

Forbidden (not JavaScript):

Math.X    Number.X    String methods    eval    Function
if/else statements    for/while    function definitions
fetch / DOM / window / async

Details →

6-color palette (callout / layout card / annotate / timeline event)

blue    red    green    yellow    purple    gray

Plain-text fallback

Every AINP block degrades in other readers as:

  • Callout → standard blockquote + [!TYPE] literal
  • Others → code block / ::: literals + inner markdown renders normally

Test: push .md to GitHub web — all content should be readable. Details →

Common pitfall reminders

slider takes attributes, not positional args: range=A..B step=S default=V
input/chip/select/toggle values are strings — for math use slider/timer
toggle compares as a string: {x == 'true' ? ... : ...}
namespace = first body line, case-sensitive, per-page scope
share across blocks → namespace; don't redeclare
mini DSL isn't JS: use sin(x), not Math.sin
fenced code nesting: outer/inner backtick counts must differ
SVG: always set viewBox

Details →

See also

  • Examples gallery — 20+ complete copy-paste demos
  • Common pitfalls — Cross-capability pitfall overview
  • The built-in Rho AI plugin speaks AINP natively — ask it to generate blocks, then read what it writes
Open in Rho MD →