Edit, validate, and extend Eclair lab notebooks. Create data visualizations with Observable Plot, D3, and Python. Use when working with .notebook.json files, chart cells, @variable references, data files, or notebook exports.
Before editing notebooks, read:
CLAUDE.md (project conventions and architecture)deno.json (available tasks)data/ directory (source of truth for charts)Plot, d3, htl, , , InputsnotebookcelineCells can be named. Reference another cell's output with @variable_name. Execution is topological — cells re-run when dependencies change.
Data files in data/ are auto-registered as @slug variables (e.g., data/aapl.csv becomes @aapl). CSV/TSV files are auto-parsed via d3.
Important: @variable references are rewritten at runtime. They must NOT appear inside string literals or comments in cell code — the replacement engine skips strings/comments, so @refs there will be left as-is (which is correct but may confuse authors).
{
"name": "Notebook Name",
"order": 0,
"autoRun": true,
"cells": [
{
"id": "unique-cell-id",
"type": "markdown|code|python",
"content": "cell content here",
"name": "optional_variable_name",
"order": 0
}
]
}
.notebook.json in notebooks/.page.html in notebooks/ — custom HTML dashboards.slides.html in notebooks/ — presentations.doc.md in notebooks/ — markdown docs.example.json in examples/ — standalone snippetsnotebooks/ to see what exists.notebook.json and identify cells to modifydata/# Development
deno task dev # Start dev server (port 8030)
deno task build:html # Rebuild frontend from partials
# Export
deno task export:html # All notebooks → self-contained HTML
deno run -A cli/export.ts -i notebooks/example.notebook.json --all -o ./images/
# Testing
deno task test # Run tests
deno fmt # Format code
fetch('/data/filename') in standalone HTML files; use @slug only inside the Eclair app