radames / observablehq-viewer

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

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

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)

observablehq-viewer's Issues

php version & page width

Excellent! I have a hacky PHP script that does something similar (code below for reference). Maybe I should try and converge it to the same API as yours (e.g. url, cells selection, css…).

I'm noticing a difference in the width of the page, where your version has .mw8 { max-width: 64rem; }, and mine doesn't add limitations. In the case of a certain notebook I want to use the full page width. It can be done from within the notebook by adding a style cell with html<style>main.mw8 { max-width: 100vw }. Maybe that's an option worth documenting (with other interesting possibilities, such as alignment).