# API Request

**URL:** <https://talk.observablehq.com/t/api-request/3098>\
**Category:** Help\
**Created:** [April 18, 2020, 8:57am UTC](https://talk.observablehq.com/t/api-request/3098 "2020-04-18T08:57:26Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 18, 2020, 8:57am UTC](https://talk.observablehq.com/t/api-request/3098/1 "2020-04-18T08:57:26Z")

</div>

It would be nice to have the ability to “export” and “import” the raw cells as a plain text blob.

Why? I am working on a VS Code ObservableJS extension, which is currently working well enough that going back to the WebUI to “publish” work I have done locally is now a pain point (add cell paste, add cell paste etc.).

It would be great if I could automate the “export” of an existing notebook, edit local and then re-“publish” back to ObservableHQ.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 18, 2020, 1:18pm UTC](https://talk.observablehq.com/t/api-request/3098/2 "2020-04-18T13:18:46Z")

</div>

Can you use [[https://api.observablehq.com/] **@user/slug** [.js?v=3]](https://api.observablehq.com/@fil/robinson-glsl.js?v=3)?

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 18, 2020, 2:58pm UTC](https://talk.observablehq.com/t/api-request/3098/3 "2020-04-18T14:58:30Z")

</div>

Yes and No - that downloads the “compiled” JS, so it can be used as a “runtime” library, but I want the plain text (as the user typed it), so you can edit it in a “normal” IDE environment as a text file.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 18, 2020, 3:42pm UTC](https://talk.observablehq.com/t/api-request/3098/4 "2020-04-18T15:42:35Z")

</div>

I’m not sure if any of the code still works, but it was at one point possible to use the API in an unofficial way to export the source of a notebook as a JSON file and also to create a new notebook as a JSON file. See the scripts mentioned in [this forum post](https://talk.observablehq.com/t/my-questions-wanted-to-say-hello-in-a-fun-special-way/2616/2). You could presumably also adapt those scripts to use the API to merge a newly uploaded notebook into the old one, too.

By the way, I’m very excited to see your VS Code extension when it’s ready!

Another alternative is to try connecting to the websocket server at wss://ws.observablehq.com/document/[notebook-hash]/edit

A long time ago I played around with a notebook that sent and received messages with the websocket server here:

> **[WebSocket-powered notebook editing tools](https://observablehq.com/@bryangingechen/websocket-powered-notebook-editing-tools?collection=@bryangingechen%2Fobservable)**
>
> An Observable notebook by Bryan Gin-ge Chen.

The websocket endpoint was locked down so the notebook no longer runs at all, but maybe some of the code will be useful to you if you decide to go this route.

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 18, 2020, 4:03pm UTC](https://talk.observablehq.com/t/api-request/3098/5 "2020-04-18T16:03:36Z")

</div>

Screenshot of runtime evaluation of values (using the blue markers as placeholders for the variables):

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/5e58b81d71a6dcba17af1b5727c2be1e5ad9d2ad.png)

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 18, 2020, 4:09pm UTC](https://talk.observablehq.com/t/api-request/3098/6 "2020-04-18T16:09:03Z")

</div>

Screenshot of rendered page:

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/63d16edb2058faa539772cd83a101c81c7352886.png)

---

<div class="post-metadata">

**Author:** ![cesutherland](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cesutherland/32/2975_2.png) [@cesutherland](https://talk.observablehq.com/u/cesutherland)\
**Post date:** [April 22, 2020, 12:45pm UTC](https://talk.observablehq.com/t/api-request/3098/7 "2020-04-22T12:45:55Z")

</div>

Beautiful! Your last screenshot — the left-hand pane is the editable source for the rendered right-hand pane?

I’ve been noodling with a similar approach for local dev, rendering to my browser. I’d love to chat about the choices for the language on the left. Markdown, w/ Observable blocks rendered in ``` code blocks?

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 22, 2020, 1:30pm UTC](https://talk.observablehq.com/t/api-request/3098/8 "2020-04-22T13:30:18Z")

</div>

Yes - its a slightly different concept (and slightly older) as its a pure Markdown document with embedded “observable” JS. (You can see it in a web page here: [https://raw.githack.com/hpcc-systems/Visualization/master/demos/storyboard/index.html](https://raw.githack.com/hpcc-systems/Visualization/master/demos/storyboard/index.html))

For the VS Code extension I am going back to a pure Observable text and am currently evaluating the runtime values in NodeJS (which isn’t IMO going to work well enough in the long run). But the syntax checking etc. is nice and its far more productive than an online UI…

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 22, 2020, 4:05pm UTC](https://talk.observablehq.com/t/api-request/3098/9 "2020-04-22T16:05:31Z")

</div>

> [@GordonSmith](#):
>
> Yes and No - that downloads the “compiled” JS, so it can be used as a “runtime” library, but I want the plain text (as the user typed it), so you can edit it in a “normal” IDE environment as a text file.

You can fetch the raw contents via [api.observablehq.com](http://api.observablehq.com):

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/46a690dfb5e3d7ff9fa9eb1232dcb7581827d0ab.png)

You will need a CORS proxy to access [api.obserablehq.com](http://api.obserablehq.com). Luckily you can find (and fork) one [here](https://glitch.com/edit/#!/observablehq-api), but note that you’ll be actively circumventing a (weak) access restriction this way by providing a fake Origin header to the server.

To use the proxy just replace the API domain with the proxy domain, or see [here](https://observablehq.com/@mootari/notebook-teasers) and [here](https://observablehq.com/@mootari/search-results-paging) for practical uses.

_ **Edit: Replaced screenshot and updated info, see next comment.** _

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 22, 2020, 4:47pm UTC](https://talk.observablehq.com/t/api-request/3098/10 "2020-04-22T16:47:31Z")

</div>

That looks like the same format as v1 of the API and doesn’t need a proxy? I am not sure it would be worth vesting time on an API which may go away, especially if this is not a direction that Mike and co. want to go?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 22, 2020, 5:12pm UTC](https://talk.observablehq.com/t/api-request/3098/11 "2020-04-22T17:12:56Z")

</div>

> [@GordonSmith](#):
>
> That looks like the same format as v1 of the API and doesn’t need a proxy?

You’re absolutely right, I had a brainfart there. I’ve replaced the screenshot to show the correct request. The rest still applies as mentioned.

---

<div class="post-metadata">

**Author:** ![cesutherland](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cesutherland/32/2975_2.png) [@cesutherland](https://talk.observablehq.com/u/cesutherland)\
**Post date:** [April 22, 2020, 11:14pm UTC](https://talk.observablehq.com/t/api-request/3098/12 "2020-04-22T23:14:34Z")

</div>

Fascinating, thanks for sharing that link!

For the extension, then — your ojs looks very reasonable. Are your cell boundaries just double newlines?

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 23, 2020, 5:03am UTC](https://talk.observablehq.com/t/api-request/3098/13 "2020-04-23T05:03:08Z")

</div>

The cell boundaries are simply the statements - the user does not need to do anything…

---

<div class="post-metadata">

**Author:** ![cesutherland](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cesutherland/32/2975_2.png) [@cesutherland](https://talk.observablehq.com/u/cesutherland)\
**Post date:** [April 24, 2020, 12:51am UTC](https://talk.observablehq.com/t/api-request/3098/14 "2020-04-24T00:51:58Z")

</div>

@GordonSmith 👍 I’d love to take a look if you have anything in a public repo!

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [April 24, 2020, 4:47am UTC](https://talk.observablehq.com/t/api-request/3098/15 "2020-04-24T04:47:38Z")

</div>

The Observable-MD (Markdown) demo above has a link to GitHub on it!

The VSCode Observable-MD support is currently part of: [https://marketplace.visualstudio.com/items?itemName=hpcc-systems.ecl](https://marketplace.visualstudio.com/items?itemName=hpcc-systems.ecl)

But with the Observable-JS support I plan on giving it its own Market Place entry - especially if we get some API support to import / publish to/from ObservabelHQ. (its a weekends only thing currently).

---

<div class="post-metadata">

**Author:** ![cesutherland](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cesutherland/32/2975_2.png) [@cesutherland](https://talk.observablehq.com/u/cesutherland)\
**Post date:** [April 25, 2020, 12:43am UTC](https://talk.observablehq.com/t/api-request/3098/16 "2020-04-25T00:43:47Z")

</div>

Ah — that’s a big help, thank you!

I’d love something bidirectional, or at least more something seamless between editing in notebook and editing in local environment.

Jermey asked about an API too, but I think what I’m looking for is simply git integration. Some human-friendly document like OJS and the ability to push or sync notebooks with github or other git repo.
