Examples gallery

20+ fully copy-paste-able Rho document snippets — categorized by scenario. Each demo: one block of source + one line of "what it teaches." Want to see them rendered? Paste into a .md file and open it in Rho MD.

Finance

F1 — Compound interest calculator (the classic)

What it teaches: slider + computed + Vega-Lite chart together → Observable-grade financial tools.

```interact namespace finance
slider principal 1000 100000 10000 1000
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
computed compound = principal * pow(1+rate, years)
template stl:
[Principal] -> [${principal:.0f}]
[Final value] -> [${compound:.0f}]
```

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

F2 — Mortgage monthly payment

What it teaches: complex financial formula written directly in computed.

```interact
slider price 100000 2000000 500000 10000
slider down 0 0.5 0.3 0.05
slider rate 0.02 0.08 0.045 0.001
slider years 5 30 30 1
computed loan = price * (1 - down)
computed monthlyRate = rate / 12
computed n = years * 12
computed monthly = loan * monthlyRate * pow(1+monthlyRate, n) / (pow(1+monthlyRate, n) - 1)
template stl:
[Loan amount] -> [${loan:.0f}]
[Monthly payment] -> [${monthly:.2f}]
[Total interest] -> [${(monthly * n - loan):.0f}]
```

F3 — Retirement planning

What it teaches: multiple sliders + complex computed + chart together.

```interact namespace retire
slider age 25 60 30 1
slider retireAge 50 75 65 1
slider monthly 100 5000 1000 100
slider rate 0 0.1 0.06 0.005
computed years = retireAge - age
computed total = monthly * 12 * ((pow(1 + rate, years) - 1) / rate)
template stl:
[Investment period] -> [{years} years]
[Principal at retirement] -> [${total:.0f}]
```

F4 — Investment return comparison

What it teaches: toggle + ternary to switch between two plans.

```interact
slider initial 1000 100000 10000 1000
slider growth 0 0.3 0.1 0.01
slider years 1 30 10 1
toggle reinvest true
computed value = reinvest ? initial * pow(1+growth, years) : initial * (1 + growth * years)
template stl:
[Mode] -> [{reinvest ? "Compound" : "Simple"}]
[Final value] -> [${value:.0f}]
```

Physics

P1 — Pendulum animation

What it teaches: timer + SVG for physics simulation; trig functions for position.

```interact
timer t 0 10 0.05 loop
slider length 30 80 50 1
template svg:
<svg viewBox="0 0 200 100" width="400" height="200">
  <line x1="100" y1="0" x2="{100 + length * sin(2*pi*t/2):.2f}" y2="{length * cos(2*pi*t/2):.2f}" stroke="#888"/>
  <circle cx="{100 + length * sin(2*pi*t/2):.2f}" cy="{length * cos(2*pi*t/2):.2f}" r="6" fill="red"/>
</svg>
```

P2 — Damped oscillation

What it teaches: exponential decay × trig composition; chart shows envelope.

```interact
slider damping 0 1 0.1 0.01
slider freq 0.5 5 2 0.1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.05, "as": "t"}},
  "transform": [{"calculate": "exp(-{damping} * datum.t) * cos(2*3.14159*{freq}*datum.t)", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "t"}, "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-1.2, 1.2]}}}
}
```

P3 — Projectile trajectory

What it teaches: parametric equations → x(t) + y(t) → trajectory plot.

```interact
slider v 5 50 25 1
slider angle 10 80 45 1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.1, "as": "t"}},
  "transform": [
    {"calculate": "{v} * cos({angle}*3.14159/180) * datum.t", "as": "x"},
    {"calculate": "{v} * sin({angle}*3.14159/180) * datum.t - 0.5 * 9.8 * datum.t * datum.t", "as": "y"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "scale": {"domain": [0, 60]}}
  }
}
```

P4 — 3 planets + sun

What it teaches: timer drives multi-object SVG with different periods.

```interact
timer t 0 1000 1 loop
template svg:
<svg viewBox="0 0 200 200" width="300" height="300">
  <circle cx="100" cy="100" r="6" fill="orange"/>
  <circle cx="{100 + 30*cos(t*0.15):.1f}" cy="{100 + 30*sin(t*0.15):.1f}" r="3" fill="gray"/>
  <circle cx="{100 + 50*cos(t*0.08):.1f}" cy="{100 + 50*sin(t*0.08):.1f}" r="4" fill="blue"/>
  <circle cx="{100 + 70*cos(t*0.04):.1f}" cy="{100 + 70*sin(t*0.04):.1f}" r="3" fill="red"/>
</svg>
```

Math

M1 — Trig functions in sync

What it teaches: one timer drives multiple functions for comparison.

```interact
timer t 0 6.28 0.05 loop
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "x"}},
  "transform": [
    {"calculate": "sin(datum.x + {t})", "as": "sin"},
    {"calculate": "cos(datum.x + {t})", "as": "cos"}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "sin", "type": "quantitative"}, "color": {"value": "red"}}},
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "cos", "type": "quantitative"}, "color": {"value": "blue"}}}
  ]
}
```

M2 — Normal distribution parameters

What it teaches: full PDF formula written directly in vega-lite.

```interact
slider mu -5 5 0 0.1
slider sigma 0.1 3 1 0.1
template vega-lite:
{
  "data": {"sequence": {"start": -10, "stop": 10, "step": 0.1, "as": "x"}},
  "transform": [{"calculate": "(1 / ({sigma} * sqrt(2*3.14159))) * exp(-pow(datum.x - {mu}, 2) / (2 * pow({sigma}, 2)))", "as": "p"}],
  "mark": "area",
  "encoding": {"x": {"field": "x"}, "y": {"field": "p", "type": "quantitative"}}
}
```

M3 — Golden ratio visualized

What it teaches: SVG nested rectangles + math constants.

```interact
slider iterations 1 8 5 1
template svg:
<svg viewBox="0 0 200 130" width="400" height="260">
  <rect x="10" y="10" width="180" height="111" fill="none" stroke="gold" stroke-width="2"/>
  <rect x="10" y="10" width="111" height="111" fill="none" stroke="gold" stroke-width="1"/>
  <rect x="10" y="10" width="69" height="69" fill="none" stroke="gold" stroke-width="1" opacity="{iterations >= 3 ? 1 : 0.2}"/>
  <rect x="10" y="10" width="42" height="42" fill="none" stroke="gold" stroke-width="1" opacity="{iterations >= 4 ? 1 : 0.2}"/>
  <text x="100" y="125" text-anchor="middle" font-size="6" fill="#888">Φ ≈ 1.618</text>
</svg>
```

M4 — Quadratic + derivative

What it teaches: layered chart shows function and its derivative.

```interact
slider a 0.1 3 1 0.1
slider b -3 3 0 0.1
slider c -3 3 0 0.1
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": -5, "stop": 5, "step": 0.1, "as": "x"}},
  "transform": [
    {"calculate": "{a}*datum.x*datum.x + {b}*datum.x + {c}", "as": "y"},
    {"calculate": "2*{a}*datum.x + {b}", "as": "dy"}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative"}, "color": {"value": "blue"}}},
    {"mark": "line", "encoding": {"x": {"field": "x"}, "y": {"field": "dy", "type": "quantitative"}, "color": {"value": "red"}}}
  ]
}
```

Education

E1 — BMI calculator (detailed)

What it teaches: slider + computed + nested ternary classification.

```interact
slider weight 40 120 70 1
slider height 1.4 2.1 1.7 0.01
computed bmi = weight / (height * height)
computed cat = bmi < 18.5 ? "Underweight" : bmi < 24 ? "Normal" : bmi < 28 ? "Overweight" : "Obese"
computed advice = bmi < 18.5 ? "Gain weight + strength training" : bmi < 24 ? "Maintain" : bmi < 28 ? "Cardio + diet control" : "Consult a doctor"
template stl:
[BMI] -> [{bmi:.1f}] ::mod(category="{cat}", advice="{advice}")
```

E2 — Unit conversion

What it teaches: select + ternary for multi-unit switching.

```interact
slider v 1 1000 100 1
select unit "kg" "lb" "oz" "stone"
computed kg = unit == "kg" ? v : unit == "lb" ? v * 0.453592 : unit == "oz" ? v * 0.0283495 : v * 6.35029
template stl:
[Original] -> [{v} {unit}]
[Kilograms] -> [{kg:.3f} kg]
```

E3 — Step calorie burn

What it teaches: toggle + multi-slider for a practical tool.

```interact
slider steps 0 30000 5000 100
slider weight 40 120 70 1
toggle hilly false
computed baseCal = steps * 0.04 * (weight / 70)
computed totalCal = hilly ? baseCal * 1.3 : baseCal
template stl:
[Steps] -> [{steps}]
[Calories burned] -> [{totalCal:.0f} kcal]
```

Engineering

Eng1 — RC circuit charging

What it teaches: time constant demonstration.

```interact
slider r 100 10000 1000 100
slider c 0.000001 0.001 0.0001 0.000001
slider v 1 12 5 0.5
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 1, "step": 0.005, "as": "t"}},
  "transform": [
    {"calculate": "{v} * (1 - exp(-datum.t / ({r} * {c})))", "as": "vc"}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "t", "type": "quantitative", "title": "Time (s)"},
    "y": {"field": "vc", "type": "quantitative", "title": "Capacitor voltage (V)"}
  }
}
```

Eng2 — PID control response

What it teaches: complex numerical demonstration.

```interact
slider kp 0 5 1 0.1
slider ki 0 2 0.5 0.1
slider setpoint 0 10 5 0.5
template vega-lite:
{
  "width": 500,
  "data": {"sequence": {"start": 0, "stop": 5, "step": 0.05, "as": "t"}},
  "transform": [
    {"calculate": "{setpoint} * (1 - exp(-{kp} * datum.t) * cos({ki}*datum.t))", "as": "y"}
  ],
  "mark": "line",
  "encoding": {"x": {"field": "t"}, "y": {"field": "y", "type": "quantitative"}}
}
```

Data

D1 — Moving average

What it teaches: raw data + computed curve overlay.

```interact
slider window 1 20 5 1
template vega-lite:
{
  "data": {"values": [
    {"t": 1, "v": 5}, {"t": 2, "v": 7}, {"t": 3, "v": 6}, {"t": 4, "v": 9}, {"t": 5, "v": 11},
    {"t": 6, "v": 8}, {"t": 7, "v": 13}, {"t": 8, "v": 15}, {"t": 9, "v": 12}, {"t": 10, "v": 17}
  ]},
  "transform": [
    {"window": [{"op": "mean", "field": "v", "as": "ma"}], "frame": [-{window}, 0]}
  ],
  "layer": [
    {"mark": "line", "encoding": {"x": {"field": "t"}, "y": {"field": "v", "type": "quantitative"}, "color": {"value": "lightgray"}}},
    {"mark": "line", "encoding": {"x": {"field": "t"}, "y": {"field": "ma", "type": "quantitative"}, "color": {"value": "red"}}}
  ]
}
```

D2 — Monte Carlo π estimation

What it teaches: vega-lite sequence + random pattern.

```interact
slider n 10 1000 100 10
template vega-lite:
{
  "width": 300,
  "height": 300,
  "data": {"sequence": {"start": 0, "stop": {n}, "as": "i"}},
  "transform": [
    {"calculate": "random()", "as": "x"},
    {"calculate": "random()", "as": "y"},
    {"calculate": "datum.x*datum.x + datum.y*datum.y < 1 ? 'in' : 'out'", "as": "inside"}
  ],
  "mark": "circle",
  "encoding": {
    "x": {"field": "x", "scale": {"domain": [0, 1]}},
    "y": {"field": "y", "scale": {"domain": [0, 1]}},
    "color": {"field": "inside"}
  }
}
```

UI patterns

U1 — Multi-language code tabs

What it teaches: tabs + nested code blocks.

```tabs
:::tab title=JavaScript
\```js
fetch('/api/users').then(r => r.json())
\```
:::

:::tab title=Python
\```py
import requests; requests.get('/api/users').json()
\```
:::

:::tab title=Go
\```go
http.Get("/api/users")
\```
:::
```

U2 — Install steps stepper

What it teaches: stepper + nested code blocks.

```stepper
:::step title="Step 1"
\```bash
npm install foo
\```
:::

:::step title="Step 2"
\```js
import foo from 'foo';
foo.init();
\```
:::

:::step title="Step 3"
\```bash
npm run dev
\```
:::
```

U3 — Roadmap timeline

What it teaches: timeline + emoji status encoding + accent colors.

```timeline
:::event date="2026 Q1" title="✅ v0.3" accent=green
12 base capabilities done
:::

:::event date="2026 Q2" title="✅ v0.6" accent=green
+computed / timer / svg = 15 capabilities
:::

:::event date="2026 Q3" title="🔨 cloud MVP" accent=yellow
share link + OG preview, 4-8 weeks
:::

:::event date="2026 Q4" title="🔮 Rho AI" accent=blue
LLM directly generates Rho format
:::
```

U4 — Plan comparison layout

What it teaches: layout grid + nested callouts.

```layout grid cols=3
:::card accent=gray
**Free**
$0/month

> [!INFO]
> Personal / trial
:::

:::card accent=blue
**Pro**
$10/month

> [!TIP]
> Top pick for pros
:::

:::card accent=purple
**Team**
$50/month

> [!IMPORTANT]
> Enterprise / SSO
:::
```