Live code blocks with CodeRunner

I always wanted a simple way to run some code examples in my blog posts and see output in the browser - like jupyter / marimo / observable notebooks.

I had the right idea - use Astro and Svelte to have a simple coderunner component - and Claude Code magicked it into being.

Code blocks below use the CodeRunner component — JavaScript runs directly in the browser. Each block auto-executes on page load and is fully editable (change the code, hit ▶ to re-run). Returning a DOM element renders it below; console.log output appears in a dark panel.

Built-in globals (no imports needed):
- Plot — Observable Plot, concise chart library from the D3 team
- csvParse, tsvParse — parse CSV/TSV strings into arrays of objects (d3-dsv)
- autoType — automatically coerce CSV string values to numbers, dates, etc.
- Inputs — interactive controls (slider, select, checkbox, text) that re-run the code on change

Fibonacci sequence

Interactive chart with Inputs

Inputs and interactive controls example.

Inputs add interactive controls that re-run the code block when changed. Each returns an object with .value (current value) and .element (auto-rendered above the output). Values persist across re-runs so a slider stays where you dragged it.

Available inputs:
- Inputs.slider(min, max, {value, label, step}) — range slider with live numeric display
- Inputs.select(options, {value, label}) — dropdown from an array of choices
- Inputs.checkbox({value, label}) — boolean toggle, defaults to false
- Inputs.text({value, label, placeholder}) — free text input

Fetching and plotting live data

Fetch JSON from an API and plot it — 30 days of Phoenix weather from Open-Meteo:

CSV data

csvParse(text, autoType) parses a CSV string into an array of objects, one per row. autoType coerces numeric/date strings to native types. tsvParse works the same for tab-separated data. Fetch any URL — GitHub raw files, APIs, etc.