Style a view

The view project owns page layout and visual styling. Add inline styles to a Vanilla document or import a stylesheet from the selected provider's browser entry point. Define page tokens at :root because marimo theme tokens are scoped to rendered cell and output content and do not cascade to sibling page elements.

<main id="app-shell" class="report">
  <p class="report-kicker">Quarterly review</p>
  <section class="summary-card">
    <marimo-output value="revenue_chart"></marimo-output>
  </section>
</main>

:root {
  --background: Canvas;
  --foreground: CanvasText;
  --card: Canvas;
  --card-foreground: CanvasText;
  --muted-foreground: color-mix(in srgb, CanvasText 66%, transparent);
  --border: color-mix(in srgb, CanvasText 18%, transparent);
  --primary: LinkText;
  --radius: 0.5rem;
  --text-font: system-ui, sans-serif;
  --heading-font: var(--text-font);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--text-font);
}

.report,
.report-kicker,
.summary-card {
  box-sizing: border-box;
}

.report {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 7vw, 6rem);
}

.report-kicker {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.summary-card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
}

Use Vanilla browser helpers

The bundled Vanilla starter loads a pinned UnoCSS runtime and the Iconify Icon web component from jsDelivr. Add utility classes directly to its HTML:

<section class="grid gap-6 md:grid-cols-2">
  <article class="rounded-lg border border-[var(--border)] p-6">
    <marimo-output value="revenue_chart"></marimo-output>
  </article>
</section>

Add a named icon with the registered web component:

<button type="button" class="inline-flex items-center gap-2">
  <iconify-icon inline icon="lucide:download" aria-hidden="true"></iconify-icon>
  Download
</button>

These scripts require network access. Configure the hosting content security policy with script-src access to jsDelivr, connect-src access to the configured Iconify API, and style-src permission for the inline <style> element generated by UnoCSS. The style rule typically requires 'unsafe-inline'. Use precompiled project CSS when the hosting policy permits only nonce or hash styles.

Style projected cells and output

Studio treats native marimo output subtrees as their own rendering boundary. Set projection variables on marimo-cell or marimo-output to integrate that content with the page:

.report-output {
  --marimo-cell-font: var(--text-font);
  --marimo-cell-heading-font: var(--heading-font);
  --marimo-cell-background: transparent;
  --marimo-cell-foreground: var(--foreground);
  --marimo-cell-surface: var(--card);
  --marimo-cell-border-color: var(--border);
  --marimo-cell-accent: var(--primary);
  --marimo-cell-radius: 0.5rem;
  --marimo-cell-padding: 1rem;
}

<marimo-output class="report-output" value="revenue_chart"></marimo-output>

--marimo-cell-accent colors links, selected options, slider fills, and focus rings in native output, including marimo controls. Without it, controls use --marimo-cell-foreground, or the color scheme's text color when that is unset, and links keep marimo's link color. Borders, muted surfaces, and secondary text mix from --marimo-cell-foreground, so unselected controls keep neutral outlines beside the accent. Set --marimo-cell-border-color, --marimo-cell-muted, or --marimo-cell-muted-foreground to choose them directly. Tooltips, dropdown menus, and date pickers open outside the projected cell, so they keep marimo's theme.

Use --marimo-cell-content-width and --marimo-cell-font-size for rendered Markdown and --marimo-cell-error for cell error treatment. Markdown keeps marimo's 1rem base size by default. Set --marimo-cell-font-size: 1em to size it from the surrounding element, as the Reveal.js starter does so notebook text scales with its slides.

Control loading states

Projection hosts expose data-state while they connect, load, update, or fail. Studio supplies a default skeleton. Adjust its size when the final result has a known footprint:

marimo-output[value="revenue_chart"] {
  --marimo-cell-skeleton-height: 24rem;
  --marimo-cell-skeleton-radius: 0.5rem;
}

[mo-value="metrics.total"] {
  --marimo-value-skeleton-width: 4ch;
  --marimo-value-skeleton-height: 0.8em;
}

Set data-skeleton="none" on a cell or output host when an empty loading slot is the intended layout.

Check the page in Preview at desktop and narrow widths. Use Manage view source for project-owned CSS files and Place notebook results in a view for projection state and events.