.hero h2 { font-style: normal; font-size: 18px; line-height: normal; color: var(--theme-foreground-muted); }

.hero .observablehq-pre-container, .hero pre:not(.observablehq-pre-container pre) { margin: 1rem 0; }

.cta { display: flex; align-items: center; gap: 2rem; }

@container not (min-width: 560px) { .cta { flex-direction: column; align-items: start; gap: 0; } .cta .observablehq-pre-container, .cta pre:not(.observablehq-pre-container pre) { width: 100%; } }

.gallery { margin: 4rem -1rem; gap: 2rem; max-width: calc(640px + 2rem); }

.gallery a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.gallery img { max-width: 100%; border-radius: 8px; box-shadow: 0 0 0 0.75px rgba(128, 128, 128, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.2); aspect-ratio: 2500 / 1900; }

@media (prefers-color-scheme: dark) { .gallery img { box-shadow: 0 0 0 0.75px rgba(128, 128, 128, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.4); } }

.gallery a:not(:hover, :focus) { color: var(--theme-foreground-muted); }

.gallery a:hover img, .gallery a:focus img { box-shadow: 0 0 0 0.75px var(--theme-foreground-focus), 0 6px 12px 0 rgba(0, 0, 0, 0.2); }

.gallery figcaption { font-size: 12px; color: inherit; }

.arrow { font-weight: 500; }

.arrow::after { content: "→"; display: inline-block; margin-left: 0.25rem; }

Observable Framework is an open-source static site generator for data apps, dashboards, reports, and more. Framework includes a preview server for local development, and a command-line interface for automating builds & deploys.

You write simple Markdown pages — with interactive charts and inputs in reactive JavaScript, and with data snapshots generated by data loaders in any programming language (SQL, Python, R, and more) — and Framework compiles it into a static site with instant page loads for a great user experience. Since everything is just files, you can use your preferred editor and source control, write unit tests, share code with other apps, integrate with CI/CD, and host apps anywhere.

Framework includes thoughtfully-designed themes, grids, and libraries to help you build displays of data that look great on any device, including Observable Plot, D3, Mosaic, Vega-Lite, Graphviz, Mermaid, Leaflet, KaTeX, and myriad more. And for working with data in the client, there’s DuckDB, Arquero, SQLite, and more, too.

Want the best dashboards? Get started now.

observable-framework-overview

Observable Framework Overview