Choose a format

Every view starts from a starterStarterA template that writes the first files of a new view project. Choose one in the New view dialog, or pass --starter to marimo-studio view create., which sets its formatFormatThe kind of project a view is, such as plain HTML, React, Svelte, Quarto, Typst, or LaTeX. The view's provider builds that format. Choose a format compares the built-in formats. and writes the first files of its view projectView projectThe folder that holds one view's source, such as studio/analysis/dashboard/. It is an ordinary project in the view's format, such as an HTML page, a React app, or a Typst document, so any editor, tool, or coding agent can change it.. Pick one in the New view dialog, or pass --starter to marimo-studio view create.

Starter	The view is	Setup
marimo-studio/vanilla:default	An HTML page with inline CSS and JavaScript	None
marimo-studio/react:default	A React app written in TypeScript	marimo-studio[deno]
marimo-studio/react:reveal	A Reveal.js slide deck	marimo-studio[deno]
marimo-studio/svelte:default	A Svelte app built with Vite	marimo-studio[deno]
marimo-studio/notebook-kit:default	An Observable notebook of JavaScript and HTML cells	marimo-studio[deno]
marimo-studio/quarto:default	A Quarto Markdown document	Quarto 1.9.38 or newer
marimo-studio/typst:default	A PDF typeset with Typst	marimo-studio[typst]
marimo-studio/latex:default	A PDF typeset with LaTeX	Tectonic 0.15 or newer

The first six build a pagePageThe HTML that a view's build produces. Every view reaches its readers as a page in the browser, and Studio fills the page's hosts with notebook results. from their own source, so their controls stay live in the browser. Typst and LaTeX views compile a PDF, a renderRenderA file, such as a PDF, an image, or a video, that a provider makes from notebook results with its own tool. Typst and LaTeX views render a PDF. Studio renders the file again when a result it reads changes, and the view's page shows the file.: Studio compiles it from the notebook's results on the server and compiles it again when a result it reads changes. Their page shows the PDF with a download link.

Start with the HTML page when you are unsure. Move to React or Svelte when components, imported assets, or npm packages make the view easier to maintain. Choose Typst or LaTeX when the result is a paper or a report to print or send.

A starter writes a view's first files, and from there the view project is yours to edit. Your page can draw notebook values with any JavaScript library: reference a script from an HTML page, or add an npm package to a React, Svelte, or Notebook Kit view. For a framework, template, or build tool outside this table, you can install or write a view provider, and its starters appear in the New view dialog next to these.

HTML

uvx marimo-studio view create report --target analysis.py

The starter writes index.html and AGENTS.md. The page already places every notebook cell that shows output. It loads pinned UnoCSS and Iconify Icon scripts from jsDelivr for utility classes and icons, so the hosting Content Security Policy must allow them. Style a page lists the exact directives.

Keep CSS and JavaScript inline, or reference local files directly:

<link rel="stylesheet" href="./style.css" />
<script type="module" src="./main.js"></script>

Studio publishes directly referenced .css, .js, and .mjs files as they are. CSS imports, asset URLs in CSS, and JavaScript module imports need a bundler, so switch to React or Svelte when a page grows them. Leave <base href> out of the page, because Studio sets it when it publishes.

React, Svelte, and Notebook Kit

These starters build with Deno, a JavaScript toolchain that ships on PyPI as the marimo-studio[deno] extra. Create the view:

React

uvx marimo-studio view create operations --target analysis.py \
  --starter marimo-studio/react:default

Reveal.js

uvx marimo-studio view create briefing --target analysis.py \
  --starter marimo-studio/react:reveal

Svelte

uvx marimo-studio view create explorer --target analysis.py \
  --starter marimo-studio/svelte:default

Notebook Kit

uvx marimo-studio view create monitor --target analysis.py \
  --starter marimo-studio/notebook-kit:default

Studio adds marimo-studio[deno] to the notebook's inline dependencies and prints the command that starts marimo with Deno. The printed command pins the installed Studio version:

uvx --with 'marimo-studio[deno]==<version>' marimo edit analysis.py --sandbox --watch

In a Python project, add the extra with uv add 'marimo-studio[deno]' and run Studio and marimo through uv run.

• React writes TypeScript and JSX, a useMarimoValue hook, deno.json, and a frozen lockfile. Its build type-checks before it bundles.
• Reveal.js is a React deck with one starting slide for each notebook cell that shows output. Place controls and the results they drive on the same slide.
• Svelte builds with Vite and writes a use:observeMarimoValue action. Its build runs svelte-check first.
• Notebook Kit writes Observable cells in src/index.html. Place hosts inside type="text/html" cells, and read values into Observable's reactive graph with marimoValue(host).

Add an npm package from the view project, with the same Deno that Studio uses:

uv run -- deno add --frozen=false --save-exact npm:d3@7

Add --package-json for Svelte and Notebook Kit, which list dependencies in package.json. Commit the updated lockfile. Studio builds with the lockfile frozen, so every build resolves the same packages. Outside a uv project, run python -m deno with the Python that runs Studio.

Quarto

Quarto renders Markdown with front matter into a styled page. Install Quarto 1.9.38 or newer, for example with pixi global install quarto, then create a view:

uvx marimo-studio view create article --target analysis.py \
  --starter marimo-studio/quarto:default

Write index.qmd and place results with the marimo shortcode. Put cell and output shortcodes on their own line between blank lines, and value shortcodes inside a sentence:

Rooms in use today: {{< marimo value="summary.rooms" >}}.

{{< marimo cell="occupancy_chart" >}}

Studio renders with --no-execute, so the computation stays in the notebook and Python code blocks in index.qmd never run. Put Python in a notebook cell and place its result. The Bulletin view of Earthquake watch is a Quarto article with citations, callouts, and notebook figures.

Typst

Typst typesets papers and reports from markup. The compiler ships on PyPI as the marimo-studio[typst] extra. Create a view:

uvx marimo-studio view create report --target analysis.py \
  --starter marimo-studio/typst:default

Studio adds marimo-studio[typst] to the notebook's inline dependencies and prints a uvx --with 'marimo-studio[typst]==<version>' marimo edit command that starts marimo with the compiler. In a Python project, add the extra with uv add 'marimo-studio[typst]'.

main.typ imports the starter's marimo.typ:

#import "marimo.typ": marimo_output, marimo_value

Rooms in use: #marimo_value("summary.rooms", default: 0)

#marimo_output("occupancy_chart", width: 100%)

Until the notebook supplies a value, marimo_value() returns its default, so give each one a default the surrounding markup can format. marimo_output() places nothing until its figure exists. The Typst CLI compiles the same file outside Studio with typst compile main.typ, using every default. The Report view of Quadratic programs is a Typst report that embeds the notebook's matplotlib figures.

LaTeX

LaTeX typesets papers with any class and package, such as a journal's submission template. Studio compiles it with Tectonic, a self-contained TeX engine. The notebook can declare Tectonic for pixi, a package manager for conda-forge packages, in its inline metadata:

# /// script
# requires-python = ">=3.10,<3.15"
# dependencies = ["marimo"]
#
# [tool.pixi.dependencies]
# tectonic = ">=0.15"
# ///

pixi add --script analysis.py tectonic writes the [tool.pixi.dependencies] table into an existing block. The upper bound on requires-python keeps pixi on a Python version Studio supports. Create the view, then open the notebook in marimo's pixi sandbox, which needs pixi 0.80 or newer:

uvx marimo-studio view create paper --target analysis.py \
  --starter marimo-studio/latex:default
uvx --with marimo-studio marimo edit analysis.py --sandbox=pixi --watch

marimo runs the notebook in the environment pixi installs from the block, and Studio runs tectonic from that environment when it builds and renders the view. Studio commands such as view create install the environment for the notebook they target. pixi global install tectonic puts Tectonic on PATH for every notebook.

main.tex loads the starter's marimo.sty:

\usepackage{siunitx}
\usepackage[en-GB, calc]{datetime2}
\usepackage{marimo}

Rooms in use on \marimodate{summary.day}: \marimonum{summary.rooms}.

\marimographics[width=\linewidth]{occupancy_chart}

\marimonum formats a number with siunitx, \marimodate a date with datetime2, and \marimorows repeats a table row for each row of a dataframe. A null value typesets an em dash, a value that has not arrived typesets ??, and a figure that has not arrived leaves a frame of its placed size.

The first compile downloads the TeX packages the document uses and can take a few minutes. The Journal paper view of Building occupancy is a paper in the IEEE TVCG journal template with the notebook's figures and tables.

When PDFs render

Where the view runs	Typst and LaTeX views show
Studio editor, in any runtime	A PDF compiled again when a result it reads changes
marimo run with the Python runtime	A PDF compiled again when a result it reads changes
Prepared export	One PDF for each prepared state
marimo run with the Browser runtime, or a wasm export	A render-results-unavailable error

A page can also draw a PDF in the browser from mo-value data with a JavaScript PDF library, which works in every runtime. The Field report view of Building occupancy does this with pdfcn.

List installed starters

uvx marimo-studio starters

The list shows each starter's ID, provider, availability, and the setup it needs. --json adds the files each starter creates. Built-in view providers documents every starter's files and options.