Observable Framework Overview

Observable Framework documentation: Observable Framework Overview Source: https://observablehq.com/framework/overview

<style> .hero { margin: 4rem 0; text-wrap: balance; } .hero h1 { font-size: 56px; max-width: none; min-width: min-content; line-height: 1; margin: 2rem 0; } .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; } </style> <div class="hero"> <h1>The best dashboards are built with <span style="color: var(--theme-foreground-focus);">code.</span></h1> <h2>Create fast, beautiful data apps, dashboards, and reports from the command line. Write Markdown, JavaScript, SQL, Python, R… and any language you like. Free and open-source.</h2> <div class="cta"> <pre data-copy>npx <span class="win">"</span>@observablehq/framework@latest<span class="win">"</span> create</pre> <a href="./getting-started" class="small arrow" style="color: var(--theme-foreground-focus);">Get started</a> </div> </div> <div class="gallery grid grid-cols-2"> <a href="https://observablehq.observablehq.cloud/framework-example-api/" target="_blank"> <picture> <source srcset="./assets/api.webp" media="(prefers-color-scheme: dark)"> <img src="./assets/api-dark.webp"> </picture> <div class="small arrow">Analyzing web logs</div> </a> <a href="https://observablehq.observablehq.cloud/framework-example-plot/" target="_blank"> <picture> <source srcset="./assets/plot.webp" media="(prefers-color-scheme: dark)"> <img src="./assets/plot-dark.webp"> </picture> <div class="small arrow">Observable Plot downloads</div> </a> <a href="https://observablehq.observablehq.cloud/framework-example-mortgage-rates/" target="_blank"> <picture> <source srcset="./assets/mortgage-rates.webp" media="(prefers-color-scheme: dark)"> <img src="./assets/mortgage-rates-dark.webp"> </picture> <div class="small arrow">Fixed-rate mortgages</div> </a> <a href="https://observablehq.observablehq.cloud/framework-example-eia/" target="_blank"> <picture> <source srcset="./assets/eia.webp" media="(prefers-color-scheme: dark)"> <img src="./assets/eia-dark.webp"> </picture> <div class="small arrow">U.S. electricity grid</div> </a> </div>