JS Notebook 📓 Inspector 🕵️

VSCode extension for Interactive Preview of Observable JS Notebooks 📚 & Notebook 📓 Nodes ⎇ & Cells ⌗ source code.

Example: Observable Notebook 📓 Inspector 🕵️

Illustration notebook with Inspect input and parameter to visualize another notebook 📓 cell ⌗ dependencies graph ⎇ ;)

Alpha v. Features

• 🕵️ Interactive Preview of JS Notebook 📓
• 📚 Tree View ⚼ panel with Starred/Favorite ⭐ Notebooks 📓
• 📥 Save Notebook 📓 as:
  • html/js runtime webpage 📰 for adding to web sites || viewing locally in a browser 🌐
  • .ojs || .omd for local JS || markdown notebook 📓 editing & preview with Observable JS vscode extension
  • .js ES JS module || .nb.json {} document w/Author 👨 info & Nodes ⎇ w/Code Cells ⌗:

Notebook 📓 JSON View

Favorite ⭐ Notebooks 📚 Tree View ⚼

Interactive DeckGL Heatmap 🗺️ Demo Notebook 📓

D3.js Gallery Notebooks 📚

Planned Beta Features

• 📚 Tree View ⚼ panel with Popular Notebooks 📓, Collections ▒ & Notebook Authors 👨
• ⎇ Notebook Graph View with links to imported Cells ⌗
• ⌗ Cell Bookmarks 🔖

...

Usage

• Run JS Notebook: View Notebook from URL (ctrl/cmd+alt+o) command from vscode View -> Command Palette ... to load Observable JS Notebook 📓

...

Installation

Install JS Notebook 📓 Inspector 🕵️ via vscode Extensions tab (ctrl+shift+x) by searching for notebook...

Recommended Extensions

Other recommended extensions for working with Interactive notebooks, data, charts, gists and geo data formats in VSCode:

Extension	Description
Observable JS	VS Code extension for Observable "JavaScript" and "Markdown"
Data Preivew 🈸	Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files
GistPad 📘	VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists
Geo Data Viewer 🗺️	Geo Data Viewer w/0 Py 🐍, pyWidgets ⚙️, pandas 🐼, or @reactjs ⚛️ required to gen. some snazzy maps 🗺️ with keplerGL ...
Vega Viewer 📈	VSCode extension for Interactive Preview of Vega & Vega-Lite maps 🗺️ & graphs 📈

Dev Log

See #jsNotebook 📓 #inspector 🕵️ on Twitter for the latest & greatest updates on this vscode extension & what's in store next.

Dev Build

$ git clone https://github.com/RandomFractals/js-notebook-inspector
$ cd js-notebook-inspector
$ npm install
$ code .

F5 to launch JS Notebook 📓 Inspector 🕵️ extension VSCode debug session.

Contributions

Any & all test, code || feedback contributions are welcome.

Open an issue || create a pull request to make this JS Notebook 📓 Inspector 🕵️ vscode extension work better for all. 🤗