5-Minute Tour of Rho MD

Scan Rho MD'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 MD can do, what it can't, and when to reach for which. Want to see them rendered live? Create a new document right here and paste any block below.

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. (AINP-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="Create a file"
```bash
touch notes.md
```
:::

:::step title="Open it in Rho MD"
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 range=40..120 step=1 default=70 label="weight (kg)"
slider height range=1.4..2.1 step=0.01 default=1.7 label="height (m)"
computed bmi = weight / (height * height)
template stl:
[BMI] -> [{round(bmi, 1)}] ::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.

The full control set: slider / timer / input / chip / select / toggle.

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

```interact
slider freq range=1..10 step=0.1 default=3 label="frequency"
slider amp range=0.1..2 step=0.1 default=1 label="amplitude"
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 range=0..0.15 step=0.01 default=0.05 label="rate"
slider years range=1..30 step=1 default=10 label="years"
slider principal range=1000..100000 step=1000 default=10000 label="principal"
computed compound = principal * pow(1+rate, years)
computed gain = compound - principal
template stl:
[Principal] -> [{round(principal, 0)}] ::mod(rate="{round(rate*100, 1)}%", years="{years} years")
[Compounded] -> [{round(compound, 0)}]
[Net gain] -> [{round(gain, 0)}]
```

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

12. Timer — auto-playing animation

```interact
timer t range=0..6.28 step=0.05 speed=20 loop=true
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 range=0..6.28 step=0.05 speed=20 loop=true = run from 0 to 6.28, advancing 0.05 per frame at 20 frames per second, then loop back to the start. Set loop=false to play once and stop.

13. SVG scenes — declarative scalable vector scenes

```interact
slider angle range=0..360 step=1 default=0 label="angle"
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)}"
        y2="{50 + 40*sin(angle*pi/180)}"
        stroke="red" stroke-width="2"/>
  <circle cx="{50 + 40*cos(angle*pi/180)}"
          cy="{50 + 40*sin(angle*pi/180)}"
          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 range=0..0.15 step=0.01 default=0.05 label="rate"
slider years range=1..30 step=1 default=10 label="years"
```

Mix in any text between blocks —

Compound multiplier:

```interact
namespace finance
computed compound = pow(1+rate, years)
template stl:
[Compound multiplier] -> [{round(compound, 2)}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 by each declaring namespace finance as their first line.

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 range=0..10 step=1 default=5 label="x"
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 MD? — design principles, capability boundaries, and how it relates to other tools
• The AINP protocol — the full specification behind every capability on this page