marimo-team/marimo-studio

marimo-studio builds views of a marimo notebook: web pages, slide decks, and typeset PDF documents that place the notebook's results by name. A view can place a cell with its controls, a rendered output such as a chart, or a value such as a number or a table. The notebook keeps the data and the computation. Each view keeps its own source in a folder beside the notebook, in the format its audience needs. Studio's starters create HTML pages, React or Svelte apps, Reveal.js decks, Observable notebooks, Quarto articles, and Typst or LaTeX PDFs. A view provider, a Python package, adds any other framework, template, or build tool.

Pages stay live, so changing a control updates every result that depends on it. Documents typeset again with the new values. Every result traces back to the notebook cell that computed it.

Two cells from a notebook that solves an optimization problem:

@app.cell
def solution(q, solve):
    solution = solve(q)
    return (solution,)


@app.cell
def level_curves(bowl, draw_problem, region, solution):
    problem_figure = draw_problem(region, bowl, solution)
    problem_figure
    return (problem_figure,)

An HTML page places the figure and the optimal value:

<marimo-output value="problem_figure"></marimo-output>
<p>The optimal value is <strong mo-value="solution.value"></strong>.</p>

A Typst report places the same two results in a PDF:

#import "marimo.typ": marimo_output, marimo_value

#marimo_output("problem_figure", width: 100%)
The optimal value is #marimo_value("solution.value", default: 0).

The notebook computes both results, and each view shows them in its own format:

The page shows the figure as marimo renders it. The PDF draws it as a vector graphic at the width the Typst source places it.

What is Studio? explains the model, and the Quadratic programs example shows both views next to the notebook.

Paste this request into Claude Code, Codex, or another terminal agent:

Run `uvx --with marimo-studio agent-plugins read marimo-studio` and create
a scrollytelling report and a slide deck explaining calculus basics.

The agent reads the instructions Studio ships for coding agents, starts a notebook with Studio, writes the calculus in Python cells, then builds both views and shows them beside the notebook. uv supplies uvx.

To work by hand, open a notebook with Studio:

uvx --with marimo-studio marimo edit analysis.py --sandbox --watch

Click Add view in the toolbar, choose HTML document, and create the view. Notebook and Preview open side by side, and saving view source rebuilds Preview.

Getting started walks through a first view, and Author with a coding agent covers working with an agent.

Each example notebook backs four views:

• Quadratic programs: a Reveal.js lecture, an HTML explainer, a Svelte and D3 lab, and a Typst report.
• Rio 2016 athletes: an HTML overview, a Mosaic explorer, a Three.js presentation, and a Quarto paper.
• Earthquake watch: an Observable Plot story, a MapLibre operations map, a Reveal.js briefing, and a Quarto bulletin.
• Building occupancy: a Notebook Kit monitor, a PDF field report, a LaTeX journal paper, and a Recharts model review.

D3, Mosaic, Three.js, MapLibre, Observable Plot, and Recharts run in the views' own code and draw the values those views read from the notebook. A page can load any JavaScript library the same way.

Serve the notebook's views as a live Python app:

uvx --with marimo-studio marimo run analysis.py --sandbox

Or export the report view as a static site:

uvx marimo-studio view export report --target analysis.py --output dist/report

The export runs the notebook on your machine, prepares results for each input state the view lists, and leaves the notebook source out of the site. Views can also run Python in the visitor's browser. Run or export a view compares the options.

Guide · Examples · Reference · Troubleshooting · Security · Contributing

Apache License 2.0.