https://github.com/asg017/atom-observable

Render Observable notebooks in Atom!
https://github.com/asg017/atom-observable

atom atom-package javascript observable-notebook observablehq

Last synced: about 2 months ago
JSON representation

Render Observable notebooks in Atom!

• Host: GitHub
• URL: https://github.com/asg017/atom-observable
• Owner: asg017
• License: mit
• Created: 2019-08-21T07:29:05.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-11T11:33:35.000Z (over 3 years ago)
• Last Synced: 2024-05-01T15:20:32.203Z (8 months ago)
• Topics: atom, atom-package, javascript, observable-notebook, observablehq
• Language: JavaScript
• Homepage: https://atom.io/packages/atom-observable
• Size: 7.08 MB
• Stars: 11
• Watchers: 4
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# atom-observable package

Render full Observable notebooks in Atom!

![](./example.gif)

## Installing

[Package here](https://atom.io/packages/atom-observable). You can `apm install atom-observable` or just look up `atom-observable` in the Atom package installer.

## Usage

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`](https://github.com/observablehq/stdlib) should work - `DOM`, `require`, `html`, `md`, all that. `import` cells will resolve from observablehq.com by default.

### What is a "notebook"?

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:

```javascript

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`](./example_notebooks) has a few examples of what could work.

## How it works

Most of the magic happens with [`@alex.garcia/unofficial-observablehq-compiler`](https://github.com/asg017/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.

## Contributing

Please do! There's a ton of potential here - access to node.js, custom libraries, better local development. Take a look at these [issues](https://github.com/asg017/atom-observable/issues) to find something to work on. Just please follow the [Contributor Covenant](https://www.contributor-covenant.org/) in all your interactions 😄

## Acknowledgement

This was built with libraries like [@observablehq/runtime](https://github.com/observablehq/runtime) and [@observablehq/parser](https://github.com/observablehq/parser) which are licensed under ISC.