Render full Observable notebooks in Atom!
Package here. You can apm install atom-observable or just look up atom-observable in the Atom package installer.
When you have a "notebook" file open, just press Alt+Ctrl+O (or Packages -> atom-observable -> Toggle), and a preview will popup, with the rendered notebook.
Once the preview is open, whenever you save the file, the entire preview will reload. It's not as cool of a dev experience as observablehq.com is, but it's something!
All stdlib should work - DOM, require, html, md, all that. import cells will resolve from observablehq.com by default.
It's basically just a regular notebook you would write on observablehq.com, but in a file. It can be made of several top-level cell definitions - with import support!
For example:
a = 1
b = 2
c = a + b
viewof name = DOM.input()
md`Hello ${name}!`
import {chart} from "@d3/bar-chart"Keep in mind - not all javascript files are valid Observable syntax. example_notebooks has a few examples of what could work.
Most of the magic happens with @alex.garcia/unofficial-observablehq-compiler - an unofficial compiler for Observable notebook syntax. All this package does is basically send the file contents to an iframe, and a script in the iframe uses the compiler to compile it to an element.
Please do! There's a ton of potential here - access to node.js, custom libraries, better local development. Take a look at these issues to find something to work on. Just please follow the Contributor Covenant in all your interactions 😄
This was built with libraries like @observablehq/runtime and @observablehq/parser which are licensed under ISC.