observable-prerender, a Node.js library for pre-rendering Observable notebooks

Hey all!

I made a tool that might interest some of you. It’s observable-prerender, an NPM package for pre-rendering Observable notebooks using puppeteer (here’s the Github repo).

It’s similar to d3-pre, but much more customizable and extendable. From Node, you’re able to render any Observable notebook into a page on Puppeteer, which allows you to manipulate data sources, screenshot graphs, and redefine cells, with only a few lines of code. If you ever wanted to script an Observable notebook in any way (e.g. generating 100s of the same chart with different data, making SVG of maps from different locations), this library may be helpful! You can also use observable-prerender to generate frames of a video for animation notebooks, which I’ve done to make this gif!

(Every single frame here was a screenshot made with observable-prerender, using Puppeteer APIs from a loaded Observable notebook)

Here’s a notebook that talks a bit about how to use this library: If you got any questions, bugs, or have any feedback, feel free to comment below or open an issue on the github page!

6 Likes