5-Minute Tour of Rho

Scan Rho's 15 capabilities in 5 minutes — each gets a minimal source snippet and a one-line description of what you'd see rendered. When you're done, you'll have a complete mental map: what Rho can do, what it can't, and when to reach for which. Want to see them rendered live? Open Rho MD and paste any block below into a .md file.

Static visual blocks (5)

No interaction, no hydration — rendered at build time.

1. Callout — informational highlight

> [!INFO]
> An informational note.

> [!WARNING]
> A warning.

> [!ZEN]
> An insight / realization. (Rho-extended type.)

Render: a highlight block with a colored side bar + icon. INFO is blue, WARNING orange, ZEN green. GitHub-flavored alerts ([!NOTE] / [!TIP] / [!IMPORTANT] / [!CAUTION]) all work too.

2. Layout grid + cards — multi-column card layout

```layout grid cols=3
:::card accent=blue
**Feature A**
What feature A does.
:::

:::card accent=red
**Feature B**
What feature B does.
:::

:::card accent=green
**Feature C**
What feature C does.
:::
```

Render: 3 equal-width cards in a row, each with a colored accent bar on top (6 colors available: blue / red / green / yellow / purple / gray). Narrow screens auto-stack into a single column.

3. Annotate — multi-color in-line annotation

```annotate
The quick brown fox jumps over the lazy dog
---
4-9|red|adjective
10-15|blue|noun
16-21|green|verb
```

Render: the original sentence stays as-is; quick, brown, jumps get red / blue / green underlines, hover shows the label. Great for grammar walkthroughs, code analysis, line-by-line contract review, line-by-line poetry annotation.

4. Timeline — vertical event timeline

```timeline
:::event date=2026-01-01 title="Project kickoff"
v0.0 spec drafted
:::

:::event date=2026-03-15 title="v0.6 released"
SVG scene capability added
:::

:::event date=2026-05-14 title="Brand locked"
Rho brand established
:::
```

Render: event cards alternate left and right of a central vertical axis. Each event's date / title is on the axis, body inside the card.

5. STL syntax highlight — semantic-tension-language coloring

```stl
[REST_API] -> [HTTP_Layer] ::mod(rule="definitional", confidence=1.0, description="REST is built on HTTP semantics")
[REST_API] -> [Statelessness] ::mod(action="requires", confidence=0.99)
[Statelessness] -> [Horizontal_Scaling] ::mod(action="enables", confidence=0.95)
```

Render: 6-color token highlighting — anchors [X] one color, arrows -> another, modifier keys another, values another, keywords another, comments another. Makes STL knowledge-graph statements as readable as code inside markdown.

Interactive blocks (5)

These need hydration — once the reader opens the page they become clickable / draggable / editable.

6. Tabs — multi-view switching

```tabs
:::tab title=JavaScript
\```js
console.log('hello');
\```
:::

:::tab title=Python
\```py
print('hello')
\```
:::

:::tab title=Rust
\```rust
println!("hello");
\```
:::
```

Render: tab bar on top, click to switch content. First tab active by default.

7. Stepper — step-by-step walkthrough

```stepper
:::step title="Install Rho"
\```bash
brew install rho
\```
:::

:::step title="Open a .md file"
File → Open → pick your .md
:::

:::step title="Start writing"
Type directly in the editor
:::
```

Render: progress bar on top + Prev/Next buttons. Shows one step at a time — clear "tutorial-style" reading experience.

8. Modal — click-to-expand overlay

```modal trigger="show technical details"
Hidden content here —
- detailed algorithm
- edge cases
- performance analysis
```

Render: an inline "show technical details" link; click → a centered overlay pops up showing the content. Great for "depth-on-demand outside the main thread."

9. Interact — slider / input driving a text template

```interact
slider weight 40 120 70 1
slider height 1.4 2.1 1.7 0.01
template stl:
[BMI] -> [{(weight / (height * height)):.1f}] ::mod(weight="{weight} kg", height="{height} m")
```

Render: two sliders (weight 40-120, height 1.4-2.1) with a live STL line below; BMI number updates as you drag.

Controls also include: input / select / toggle / button.

10. Interact + Vega-Lite — slider-driven live chart

```interact
slider freq 1 10 3 0.1
slider amp 0.1 2 1 0.1
template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "t"}},
  "transform": [{"calculate": "{amp} * sin({freq} * datum.t)", "as": "y"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "t", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}}
  }
}
```

Render: two sliders control frequency and amplitude; a sine-wave chart below deforms in real time. Observable-notebook-grade experience.

Computed + animation (3)

Makes interaction more than "echo input value" — it can actually compute, and move.

11. Computed — derived values

```interact
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
slider principal 1000 100000 10000 1000
computed compound = principal * pow(1+rate, years)
computed gain = compound - principal
template stl:
[Principal] -> [{principal:.0f}] ::mod(rate="{(rate*100):.1f}%", years="{years} years")
[Compounded] -> [{compound:.0f}]
[Net gain] -> [{gain:.0f}]
```

Render: three sliders (rate / years / principal) → three live-computed lines. computed uses a mini DSL (not JS!) for declarative expressions: + - * / pow sqrt sin cos pi etc. are available.

12. Timer — auto-playing animation

```interact
timer t 0 6.28 0.05 loop
template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "x"}},
  "transform": [{"calculate": "sin(datum.x + {t})", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-1.5, 1.5]}}}
}
```

Render: a sine wave flows leftward indefinitely, like an oscilloscope. timer t 0 6.28 0.05 loop = run from 0 to 6.28, step 0.05 every 50ms, then loop back. Other modes: pause, once, pingpong.

13. SVG scenes — declarative scalable vector scenes

```interact
slider angle 0 360 0 1
template svg:
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#888" stroke-width="0.5"/>
  <line x1="50" y1="50"
        x2="{50 + 40*cos(angle*pi/180):.2f}"
        y2="{50 + 40*sin(angle*pi/180):.2f}"
        stroke="red" stroke-width="2"/>
  <circle cx="{50 + 40*cos(angle*pi/180):.2f}"
          cy="{50 + 40*sin(angle*pi/180):.2f}"
          r="3" fill="red"/>
</svg>
```

Render: a circle, with a red line and point indicating a position around its circumference; drag the angle slider and the red line rotates. Mini-DSL expressions evaluate inside SVG attributes directly. Safe: built-in SVG sanitizer strips <script> / event attrs / external URLs.

Pair with timer for automatic rotation animation; pair with multiple sliders to build any 2D physics simulation — spring, pendulum, planet, circuit.

Composition (2)

Combine all the above — that's where the real power lives.

14. Shared state — namespace across blocks

```interact namespace finance
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
```

Mix in any text between blocks —

Compound multiplier:

```interact namespace finance
computed compound = pow(1+rate, years)
template stl:
[Compound multiplier] -> [{compound:.2f}x]
```

Growth curve:

```interact namespace finance
template vega-lite:
{
  "data": {"sequence": {"start": 1, "stop": 31, "step": 1, "as": "y"}},
  "transform": [{"calculate": "pow(1+{rate}, datum.y)", "as": "v"}],
  "mark": "line",
  "encoding": {"x": {"field": "y"}, "y": {"field": "v", "type": "quantitative"}}
}
```

Render: the first block's two sliders drive both subsequent blocks (a computed text + a growth chart). Multiple interact blocks share the same variables through namespace finance.

15. Nested DSL — DSLs inside DSLs

```layout grid cols=2

:::card accent=blue
> [!INFO]
> A callout inside a layout card
:::

:::card accent=red
\```interact
slider x 0 10 5 1
template stl:
[Current value] -> [{x}]
\```
:::
```

Render: left card has a blue callout; right card has a draggable slider + live text output. Any block nests inside any block — callout in stepper, stepper with interact, interact in modal, modal in tabs... composition is unbounded.

What's next

See also

• What is Rho? — Rho's design principles, capability boundaries, and how it relates to other tools
• AINP protocol (v0.7) — Full specification (for implementers)
• @rho/md library — Reference implementation on npm