radames/observablehq-viewer

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

CSS

ObservableHQ Viewer

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

Usage

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

Examples

`https://observablehq-viewer.radamar.workers.dev/@fil/synchronized-projections`

from @fil/synchronized-projections

`https://observablehq-viewer.radamar.workers.dev/@mbostock/voronoi-stippling`

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

`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart`

or the whole notebook

`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race`

`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

`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?cells=chart&fullwidth=1`

or the whole notebook

`https://observablehq-viewer.radamar.workers.dev/@johnburnmurdoch/bar-chart-race?fullwidth=1`

TODOS

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