Choose a frontend

Start with plain HTML, CSS, and JavaScript. Choose React or Svelte when component structure, imported assets, or a larger module graph makes the view project easier to maintain. Choose Observable Notebook Kit for reactive JavaScript, Markdown, and HTML cells.

Every built-in view provider supports marimo-cell, marimo-output, and mo-value. To use another framework, see Bring your own frontend.

Starter	Choose it for
marimo-studio/vanilla:default	Reports, small tools, and browser-native pages
marimo-studio/react:default	Typed React applications and component systems
marimo-studio/react:reveal	Ordered Reveal.js presentations
marimo-studio/svelte:default	Svelte applications with concise reactive browser state
marimo-studio/notebook-kit:default	Observable notebook HTML with reactive presentation cells

For React, Svelte, and Notebook Kit, install the Deno toolchain in the notebook's Python project before running dependency commands:

uv add 'marimo-studio[deno]'

Run Deno through that environment with uv run -- deno so dependency changes and Studio builds use the same Deno version. Outside a uv project, run python -m deno with the Python of the environment that runs Studio.

HTML document

Create the default starter:

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

The starter creates index.html and AGENTS.md. It populates the document with the notebook cells that may display output and supplies an inline observeMarimoValue adapter. The document loads pinned UnoCSS runtime and Iconify Icon web component scripts from jsDelivr for utility styling and named icons. Subresource Integrity binds each script tag to the pinned file bytes. The hosting content security policy must allow jsDelivr scripts, Iconify API requests, and the inline <style> element generated by UnoCSS.

Keep CSS and JavaScript inline for a compact page, or reference local leaf files directly:

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

The Vanilla provider publishes those directly referenced .css, .js, and .mjs files at the same artifact paths. Local CSS imports, CSS asset URLs, and JavaScript module imports require bundling or another provider. Remote modules require browser network access and a hosting Content Security Policy that allows their origins.

Leave <base href> out of the authored entry document. Studio supplies the delivery base when it publishes the artifact.

React

Create a typed React project with the Deno JavaScript and TypeScript toolchain:

uvx --from 'marimo-studio[deno]' marimo-studio view create operations \
  --target analysis.py \
  --starter marimo-studio/react:default

The starter includes TypeScript with JSX markup in .tsx files, CSS, custom-element declarations, a useMarimoValue hook, deno.json, and a frozen lockfile. Its build runs type checking before bundling.

Add an exact dependency from the view project root:

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

Commit deno.json and deno.lock after an intentional update. Normal Studio builds keep the lockfile frozen.

Reveal.js slides

Create a slide deck:

uvx --from 'marimo-studio[deno]' marimo-studio view create briefing \
  --target analysis.py \
  --starter marimo-studio/react:reveal

The starter supplies Reveal.js structure, navigation, fragments, overview, and one initial slide for each notebook cell that may display output. Place marimo controls and dependent results directly inside a slide.

Svelte

Create a typed Svelte project:

uvx --from 'marimo-studio[deno]' marimo-studio view create explorer \
  --target analysis.py \
  --starter marimo-studio/svelte:default

The starter includes Svelte, TypeScript, Vite, a frontend development and build tool, an observeMarimoValue action, package.json, Deno configuration, and a frozen lockfile. Its build runs svelte-check before Vite.

Add an exact application dependency from the view project root:

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

Commit package.json and deno.lock after the update.

Observable Notebook Kit

Observable Notebook Kit demonstrates a bespoke provider integration: its notebook HTML format and reactive JavaScript runtime work with the same marimo projections as the other frontends.

Create an Observable notebook view:

uvx --from 'marimo-studio[deno]' marimo-studio view create report \
  --target analysis.py \
  --starter marimo-studio/notebook-kit:default

Write Notebook Kit cells in src/index.html. Put marimo-cell, marimo-output, and mo-value hosts inside type="text/html" cells. The supplied marimoValue(host) generator connects a declared value host to Observable's reactive graph. Keep shared computations and controls in the marimo notebook.

The starter builds through Vite and Deno with frozen dependencies. Edit the page template in src/page.tmpl and styles in src/style.css. See the Notebook Kit provider reference for value subscriptions, interpolated targets, and project options.

Inspect installed starters

marimo-studio starters

Human-readable output lists the starter ID, summary, provider, availability, and setup action. Use JSON when a tool needs the advertised source-document plan:

marimo-studio starters --json

The Files created detail in Studio shows the same document plan before view creation. A starter may also create provider-owned files required by its build.

Use Manage view source for the distinction between source documents and build inputs.

Bring your own frontend

Install a view provider package to add starters for another framework, template, or build tool. Its starters appear in the New view picker under the package name, and its views build with that framework's own commands. Add a view provider walks through a complete provider, from the pyproject.toml entry point to a Vite build run by Deno, and starts with a prompt that asks a coding agent to build one.