Explore
Pricing
Observable
Explore
Get started
The computational, collaborative, agentic document
where everyone answers questions with data

Observable notebooks are lightweight documents that let you think, explore, and explain with code. Quick to sketch and infinitely flexible, use them to analyze or visualize data, craft beautiful explanations, and support data-driven workflows with custom apps.

Generative art
Advanced data visualizations
Ad hoc data analysis
Explorable explanations
Powerful data apps
Five seconds to chart

We’re impatient because time is precious. Speed determines not just how long a task will take, but whether you do it at all. Observable accelerates the feedback and discovery loop. Inventing software should be a joy and not a chore.

Write faster by hand or with an agent. Quickly draft analysis in an Observable chat, then transition to a notebook to get hands-on. Or start directly in a notebook.

Batteries included. Query data, visualize, add interaction. Everything you need to immediately start analyzing data.

File attachments
Databases
Secrets
Libraries
Inputs

Just start writing. Edit and run code with a minimal UI that gets out of your way.

Cell editor showing Markdown
Understand your code

Even simple programs can be hard to understand. And yet the more we understand, the more we can get computers to do what we want. Code isn’t just execution instructions — code formalizes and clarifies thought. Observable aids interpretation by decomposing logic into cells, minimizing hidden state, and showing live values.

Inspector showing fetched API response
Dataflow panel showing cell topology

There’s more to see than console.log. In Observable, live values are shown adjacent to the code that defines them, while the dataflow panel gives an overview of the whole notebook. Observable reduces context switching by integrating running, reading, and editing code.

Literate programming. Explain code by interleaving prose and visuals. Reorder cells to make sense to you, not the computer.

# Title
md
Plot.rectY(data, …).plot()
ts
Paragraph describing the chart above…
md
const data = sql`SELECT date, value FROM …`;
ts

Better for agents, too. Like you, the Observable agent can inspect runtime values, see interactive selections in charts and maps, and inject code into the running program.

Runtime inspection
User interaction
Incremental execution
Work better together

The best work happens when people work together. But trust varies wildly across social boundaries, so collaboration can’t be one-size-fits-all. Observable supports both real-time multiplayer editing and git-style fork-and-merge workflows. And comments. And fine-grained access. And unlisted notebooks, versioned publishing, and more.

Network diagram showing forks of a notebook in phyllotaxis arrangement

Notebooks are re­mixable, re­composable software. Any notebook can be forked and any value imported. Forking lets you copy a notebook and edit it. Merging lets you review and apply changes from one notebook to another — even across teams.

No stepping on toes. Built-in version history means you can review changes and rewind them at any time. (You can fork versions, too.)

Panel showing notebook edit history with multiple versions and authors

A place for everything and everything in its place. Team workspaces allow serendipitous coordination and centralized management of data sources, component libraries, and more.

import {BarChart} from "observable:@acme/bar-chart";
ts
import {queryDailyActiveUsers} from "observable:@acme/metrics";
ts
Cell editor showing autocomplete for DatabaseClient
Own your work

Take your notebooks anywhere with no strings attached. Local development, self hosting, custom integrations… you name it. Notebooks have a human-readable, plain-text file format and we provide free open-source tooling for generating static sites.

TODO

Open file format and open-source tooling. Edit notebooks in your preferred text editor. Preview live in your browser using Vite. Build and deploy static sites using automated actions.

Boring technology is built to last. Notebooks are written in vanilla JavaScript, TypeScript, HTML, SQL, etc.. Import any library from npm. If it runs on the web, it works in a notebook.

TypeScriptJavaScriptnpmMarkdown

We love open source. The libraries we maintain, including Plot and D3, are downloaded more than a thousand times per second.

d3
d3-shape
d3-force
plot
runtime

Explore the community

Some notebooks are like blog entries, thinking out loud; some are pedagogical examples, offering or seeking feedback; some are precision-honed masterpieces.

Trending notebooks
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Thumbnail
Featured authors
ThumbnailThumbnailThumbnailThumbnail
ThumbnailThumbnailThumbnailThumbnail
ThumbnailThumbnailThumbnailThumbnail
ThumbnailThumbnailThumbnailThumbnail
Forum

Follow our development

Observable is constantly improving. We rely on you to help us prioritize what we build. Tell us what excites you the most! We discuss our work on our weekly podcast and on the Observable forum, X, and Bluesky.

Release notes
Observable Agent
Observable Chat
Vanilla JavaScript
File attachments
Secrets
DuckDB
Modern standard library
Publish
Author listings
Trending
Databases
Soon
Query snapshots
Soon
Minimap
Soon
Following
Soon
Podcast
Social

Get started

Learn the basics of working in Observable, or fork a notebook to start. Peruse our example, tutorials, and documentation.

Documentation
Thumbnail
Thumbnail
Thumbnail
Examples
Thumbnail
Thumbnail
Thumbnail
Thumbnail

Get started
on your first notebook
© 2026 Observable, Inc.
Terms of servicePrivacy policy
ProductAboutPricingDocumentationRelease notesContact us
Open sourceNotebook KitPlotD3
CommunityExploreForumBlueskyYouTubeX
Nov 10
To do, look up "Inkling: Exploring How Students Design Visualizations with Integrated Sketching, Natural Language, and Code Editing", by Sadie M Fisher, Austin P Wright, Ayaan M Kazerouni #ieeevis
Nov 10
Examples of visual explanations of papers: inferencetimescaling.espud.org susiesyli.com/text-diffusi... #ieeevis
Nov 10
Learning about lamp (Local Affine Multidimensional Projection) www.rdocumentation.org/packages/mp/... from Priscylla Silva of priscyllasilva.com.br/visagreement...
Nov 10
Also looks interesting ieeevis.org/year/2026/pr...
Oct 25
What do you learn from vibecoding an explanation?
We explore two notebooks by Ricky Reusser: (1) Toiletpaperfullerenes and Charmin Nanotubes (2020) https://observablehq.com/@rreusser/toiletpaperfullerenes-and-charmin-nanotubes and (2) Geodesics in Kerr Spacetime (2026) https://rreusser.github.io/notebooks/kerr-geodesics/ (self-hosted using Notebook Kit). The first was hand-coded; the second was vibecoded. What did he learn from making each of them?
Oct 9
Julio’s bookshelf
If you point to a random book in Julio’s picture-perfect background, has he read it? How many biographies does he read per American president? And is reading dying?
Sep 10
Never don’t rewrite
Last week, Observable launched a total rewrite of notebooks. Contra Joel Spolsky’s advice, Mike Bostock has done many rewrites, from TiVo to Protovis to D3, and itches to do many more. Why?
Jul 19
Seven classic moments in visualization research
Toph recounts seven moments in visualization history, in no particular order: 1923’s gestalt theory, 2025’s graph embeddings, 1933’s map–territory relation, 1975’s splines, 2016’s acquired code of meaning, 2020’s bridging code and interaction, and 1973’s conversation analysis. For sources, see https://observablehq.com/@tophtucker/classic-research-in-data-visualization.
Thumbnail
Hello Draggable Plot
Jo Wood’s avatar
Jo Wood
Nov 9
15
1
Thumbnail
Prompting only (WebGL)
Fil’s avatar
Fil
Nov 10
2
Thumbnail
U.S. State SorterFork
Julien Colot’s avatar
Julien Colot
Nov 10
5
Thumbnail
TYPEWRITER MAP -- U.S. SENATE ELECTIONS 2026
Fil’s avatar
Fil
Nov 10
16
Thumbnail
Day 8: Utopia
Xavier Olive’s avatar
Xavier Olive
Nov 8
5
Thumbnail
Hello, esm.sh
Mike Bostock’s avatar
Mike Bostock
Nov 6
7
Thumbnail
Non-planimetric hachures
Fil’s avatar
Fil
Nov 7
5
3
Thumbnail
Trump II has decimated federal workers
Fil’s avatar
Fil
Nov 6
7
1
ThumbnailThumbnailThumbnailThumbnail
Lao’s avatarLao
(60)
Dec 14, 2020
657
ThumbnailThumbnailThumbnailThumbnail
Matt Khinda’s avatarMatt Khinda
(15)
Dec 23, 2022
51
ThumbnailThumbnailThumbnailThumbnail
Amit Sch’s avatarAmit Sch
(15)
Jan 31, 2018
284
ojs
ojs

Plot cars’ fuel economy vs. horsepower.

The chart shows a clear negative relationship: as horsepower increases, fuel economy decreases, with the trend line (red) confirming this pattern. Cars are also colored by cylinder count, and you can see that higher-cylinder engines (6 and 8 cylinders, shown in warmer colors) cluster in the high-power, low-economy region, while 4-cylinder cars dominate the low-power, high-economy region.

ojs
ojs
ojs
ojs
ojs
ts
sql
html
Thumbnail
Notebooks user guide
Toph Tucker’s avatar
Toph Tucker
Sep 18
12
2
Thumbnail
Chat user guide
Toph Tucker’s avatar
Toph Tucker
Sep 1
3
3
Thumbnail
Notebooks system guide
Toph Tucker’s avatar
Toph Tucker
Nov 10
15
1
Thumbnail
Upgrading to Notebooks 2.0
Toph Tucker’s avatar
Toph Tucker
Oct 22
9
Thumbnail
Fetch caching
Mike Bostock’s avatar
Mike Bostock
Sep 13
8
Thumbnail
Fetch proxying
Mike Bostock’s avatar
Mike Bostock
Sep 13
5
Thumbnail
Programmatic file attachments
Mike Bostock’s avatar
Mike Bostock
Aug 16
4
Thumbnail
Database clients
Mike Bostock’s avatar
Mike Bostock
Oct 4
6
3
Thumbnail
Notebook imports
Mike Bostock’s avatar
Mike Bostock
Oct 21
5
Thumbnail
Keyboard shortcuts
Mike Bostock’s avatar
Mike Bostock
Sep 25
123
9
Thumbnail
Secrets
Mike Bostock’s avatar
Mike Bostock
Oct 21
58
2
Thumbnail
Mutables
Mike Bostock’s avatar
Mike Bostock
Oct 22
4
Thumbnail
Invalidation
Mike Bostock’s avatar
Mike Bostock
Sep 30
42
Thumbnail
Publishing
Mike Bostock’s avatar
Mike Bostock
Oct 6
5
4
Thumbnail
Skills
Mike Bostock’s avatar
Mike Bostock
Oct 19
2
Thumbnail
Following
Mike Bostock’s avatar
Mike Bostock
Oct 24
6
Thumbnail
Imports
Mike Bostock’s avatar
Mike Bostock
Oct 21
2
Thumbnail
Implicit imports
Mike Bostock’s avatar
Mike Bostock
Oct 21
5
Thumbnail
DuckDB
Mike Bostock’s avatar
Mike Bostock
Nov 5
66
7
Thumbnail
SQLite
Mike Bostock’s avatar
Mike Bostock
Oct 27
96
Thumbnail
Inputs
Mike Bostock’s avatar
Mike Bostock
Nov 4
390
53
ThumbnailThumbnailThumbnailThumbnail
Notebooks 2.0(28)
Observable’s avatar
Observable
Jun 12
86
ThumbnailThumbnailThumbnailThumbnail
Maps(67)
Observable’s avatar
Observable
Nov 13, 2018
3,711
ThumbnailThumbnailThumbnailThumbnail
Visualization(84)
Observable’s avatar
Observable
Jul 19, 2023
7,295
ThumbnailThumbnail
Integrations(2)
Observable’s avatar
Observable
Oct 26
4
ThumbnailThumbnailThumbnailThumbnail
WebGL(21)
Observable’s avatar
Observable
Nov 13, 2018
919
ThumbnailThumbnailThumbnailThumbnail
Explorables(36)
Observable’s avatar
Observable
Nov 13, 2018
2,480
ThumbnailThumbnailThumbnailThumbnail
Generative art(40)
Observable’s avatar
Observable
Sep 13, 2018
1,894
ThumbnailThumbnailThumbnail
Featured libraries(3)
Observable’s avatar
Observable
Jun 9
1,307
JobNov 10
Two notebooks: declarative zdog, and a way to make it easier to animate only while the cell is visible
So I just got a little nerd-sniped when I rediscovered this unpublished notebook for zdog from five years ago, and updated it to the new version of Observable: https://observablehq.com/@jobleonard/p5-flavored-zdog … which also made me sit down and (finally) implement a helper function that handles basically every bit of boilerplate that annoys me to no end when I want to animate a cell, but only when visible, using requestAnimationFrame to avoid rendering too often, and with proper clean-up on cell invalidation: function animateAsync(invalidation, visibility, fn) { if ( typeof visibility !== "function" || typeof fn !== "function" || typeof invalidation?.then !== "function" ) return; const DONE = Symbol("DONE"); const PAUSE = Symbol("PAUSE"); let _finished = false; let _paused = true; let request = null; const resolver = resolve => { request = requestAnimationFrame(() => { request = null; resolve(); }); }; const loop = async () => { while (!_finished && !_paused) { await visibility(); switch(fn(DONE, PAUSE)) { case DONE: _finished = true; case PAUSE: _paused = true; return; default: await new Promise(resolver); }; } return; }; let _loop = null; const state = { // hidden behind getters so you can't accidentally // resume an invalidated animation and leak resources. get finished() { return _finished; }, get paused() { return _paused; }, cancel() { _finished = true; return state; }, pause() { _paused = true; return state; }, resume() { if (_paused && !_finished) { _paused = false; _loop = request ? state : loop(); } return _loop; } }; invalidation.then(state.cancel); requestAnimationFrame(state.resume); return state; } https://observablehq.com/@jobleonard/combining-request-animation-frame-with-await-visibility Anyway, I thought I’d share in case other people are dealing with similar a stumbling block with animated cells. 1 post - 1 participant Read full topic
JakobNov 9
SQL cells not working (since switching to imports from esm.sh?)
Since Sunday, Nov 9, SQL cells no longer run for me. I can reproduce it in the Notebooks system guide: the SQL cell only shows the loading spinner. The browser console shows: async_bindings.ts:307 error in duckdb worker: Uncaught NetworkError: Failed to execute ‘importScripts’ on ‘WorkerGlobalScope’: The script at ‘https://esm.sh/@duckdb/duckdb-wasm@1.32.0/dist/duckdb-browser-eh.worker.js’ failed to load. Is anyone else experiencing this issue? Is this perhaps related to the switch to imports from esm.sh? Thank you! PS: I do really enjoy the new Observable – Thank you so much for all your effort! 2 posts - 2 participants Read full topic
jwoLondonNov 8
Draggable Plot
The recent publication of `Declarative Dragging’ (D2) — https://declarative-dragging.github.io — seems like an important development in goal of keeping visualization specification declarative. @tophtucker provided a nice introduction to its approach and origins here: https://observablehq.com/@tophtucker/hello-dragology I was excited to try it out with Plot since they have what feels like a matching level of abstraction and easy integration with Observable’s reactive approach. I’ve long wanted to make my Plots interactive via Direct Manipulation, and this approach feels natural. …24 hours later, after a some GenAI help (I am not a React programmer), I have a couple of functions for integrating Declarative Dragging with Plot. Hello Draggable Plot! https://observablehq.com/@jwolondon/draggable-plot I’ve tried to provide comprehensive documentation and examples, as one of the only shortcomings of the D2 site is relative lack of programming documentation. I am excited to be able to integrate Direct Manipulation into Plot, and welcome feedback / suggested changes for this API and documentation. 1 post - 1 participant Read full topic
tomNov 6
404 trying to add a notebook to a new collection
I created a new collection, Pathfind, which lives at https://observablehq.com/@tmcw/-/collection/pathfind - and currently it’s empty. When I click “Add Notebooks” on that collection page, I arrive at the URL https://old.observablehq.com/collection/@tmcw/pathfind on old.observable, which is a 404. Looks like a bug in the migration from old to new. 2 posts - 2 participants Read full topic
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs