https://github.com/randomfractals/js-notebook-inspector
JS Notebook 📓 Inspector 🕵️ -> vscode extension for Interactive Preview of Observable JS Notebooks 📚 & Notebook 📓 Nodes ⎇ & Cells ⌗ source code.
https://github.com/randomfractals/js-notebook-inspector
inspector js notebooks observable vscode
Last synced: 11 months ago
JSON representation
JS Notebook 📓 Inspector 🕵️ -> vscode extension for Interactive Preview of Observable JS Notebooks 📚 & Notebook 📓 Nodes ⎇ & Cells ⌗ source code.
- Host: GitHub
- URL: https://github.com/randomfractals/js-notebook-inspector
- Owner: RandomFractals
- License: apache-2.0
- Created: 2020-04-27T13:54:06.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T15:49:10.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T11:51:58.093Z (11 months ago)
- Topics: inspector, js, notebooks, observable, vscode
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector
- Size: 4.31 MB
- Stars: 27
- Watchers: 1
- Forks: 3
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# JS Notebook 📓 Inspector 🕵️
[](https://github.com/RandomFractals/js-notebook-inspector)
[](http://opensource.org/licenses/Apache-2.0)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector)
[VSCode](https://code.visualstudio.com/) extension for Interactive Preview of [Observable](https://observablehq.com/explore) JS Notebooks 📚 & Notebook 📓 Nodes ⎇ & Cells ⌗ source code.
#### Example: [Observable Notebook 📓 Inspector 🕵️](https://observablehq.com/@randomfractals/notebook-info)
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](https://github.com/observablehq/runtime) webpage 📰 for adding to web sites || viewing locally in a browser 🌐
* `.ojs` || `.omd` for local JS || markdown notebook 📓 editing & preview with [Observable JS](https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js) vscode extension
* `.js` [ES JS module](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) || [`.nb.json {}`](https://github.com/RandomFractals/js-notebook-inspector/blob/master/notebooks/intro/hello-world.nb.json) document w/Author 👨 info & Nodes ⎇ w/Code Cells ⌗:
### Notebook 📓 JSON View
### Favorite ⭐ Notebooks 📚 Tree View ⚼
### Interactive [DeckGL Heatmap 🗺️ Demo Notebook 📓](https://github.com/RandomFractals/js-notebook-inspector/tree/master/notebooks/deck.gl)
### [D3.js Gallery Notebooks 📚](https://github.com/RandomFractals/js-notebook-inspector/tree/master/notebooks/d3)
# 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 🕵️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.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](https://code.visualstudio.com/):
| Extension | Description |
| --- | --- |
| [Observable JS](https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js)| VS Code extension for Observable "JavaScript" and "Markdown" |
| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files |
| [GistPad 📘](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) | VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists |
| [Geo Data Viewer 🗺️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) | Geo Data Viewer w/0 Py 🐍, pyWidgets ⚙️, pandas 🐼, or @reactjs ⚛️ required to gen. some snazzy maps 🗺️ with keplerGL ... |
| [Vega Viewer 📈](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) | VSCode extension for Interactive Preview of Vega & Vega-Lite maps 🗺️ & graphs 📈 |
# Dev Log
See [#jsNotebook 📓 #inspector 🕵️ on Twitter](https://twitter.com/search?q=%23jsNotebook%20%23inspector&src=typed_query&f=live) for the latest & greatest updates on this vscode extension & what's in store next.
# Dev Build
```bash
$ 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. 🤗