Skip to content

Simple service to generate Observablehq notebooks previews outside Observablehq UI. It's also reproducing Observablehq UI styles

Notifications You must be signed in to change notification settings

radames/observablehq-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ObservableHQ Viewer

This project makes it simple to preview an Observablehq notebook outside Observablehq UI.

Usage

  1. https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK

  2. https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2

  3. https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2&fullwidth=1

Examples

from @fil/synchronized-projections

from @mbostock/voronoi-stippling

Named Cells

You can target only interesting cells and let code cells out of your preview. You will need named cells

cellName = {
  
}

Example

Take this https://observablehq.com/@johnburnmurdoch/bar-chart-race

Here you can preview only the cell names chart

or the whole notebook

https://observablehq-viewer.radamar.workers.dev/USER/NOTEBOOK?cells=cellname1,cellname2

or multiple cells

https://observablehq-viewer.radamar.workers.dev/@radames/hello-d3fc-webgl?cells=title,chartEl

Full Width

Pass fullwidth=1 param to render the cells on 100% of viewport, disabling max-width: 64rem that Observablehq UI defaults.

Example

or the whole notebook

TODOS

  • link back to original notebook on Observablehq
  • notebook author information on preview
  • change page title to notebook title (fetch title from observablehq api)

About

Simple service to generate Observablehq notebooks previews outside Observablehq UI. It's also reproducing Observablehq UI styles

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published