Observable notebooks directly inside Visual Studio Code?

I may not have explored this option enough, but would it be possible to edit Observable notebooks directly in Visual Studio Code, similar to Jupyter notebooks? code.visualstudio.com/docs/python/ju… Or is that not really possible because Observable notebooks are online?

Something very crude along these lines is possible. You can download the tarball to a notebook (see the three dots in the upper right hand corner of any page) and then untar it somewhere and edit the notebook.js file in vs code. If you use some kind of “live preview” extension for VS code (e.g. this one) to open index.html, you can see the notebook update in real time. To put it in Jupyter terms, this is kind of like opening the .ipynb file in VS code directly and editing it and having a live-updating read-only ipynb viewer in another tab.

The nice editor interface on Observable’s site could in principle be reproduced / imitated in a server application that you could run locally. That could then integrate with VS Code via an extension. But all of these pieces would have to be written. I think the Observable team has said they don’t plan on open-sourcing their editor anytime soon (see 1).

1 Like