Learn OBSERVABLEHQ with Real Code Examples

Web-based platform running in the browser

Reactive computation model where outputs update on input change

Notebook composed of linked cells (JavaScript, Markdown, HTML)

Integration with third-party JS libraries via URL imports

Cloud-hosted environment with sharing, publishing, and versioning

Browser executes JavaScript/TypeScript cells

Reactive engine tracks dependencies and updates outputs

Visualizations rendered using SVG, Canvas, or WebGL

Markdown cells render formatted explanations

Interactive inputs and sliders update connected cells

Reactive notebook with dependency graph

Cells as units of computation and display

Integration with external libraries via URL imports

Separation of data, code, and visualization

Cloud-hosted collaboration and publishing

Data journalism interactive charts

Classroom teaching of JavaScript and visualization

Exploratory data analysis for research

Prototyping dashboards for clients

Interactive data storytelling and reports

Reactive and interactive programming model

Immediate visual feedback

Encourage experimentation and exploration

Web-first and collaborative approach

Integration with rich visualization libraries

Small: single-cell experiments or mini charts

Medium: multi-cell dashboards and interactive plots

Large: notebooks with multiple data sources and visualizations

Expert: complex reactive workflows with external APIs

Enterprise: prototyping interactive dashboards for teaching or demos

Fork notebooks to maintain a personal copy

Export code snippets for integration in local projects

Check dependencies when moving notebooks externally

Adjust visualizations for new libraries or versions

Backup important notebooks using export or GitHub sync