# Yet another attempt to go from Observable to VanillaJS

**URL:** <https://talk.observablehq.com/t/yet-another-attempt-to-go-from-observable-to-vanillajs/3328>\
**Category:** Help\
**Created:** [May 20, 2020, 1:17am UTC](https://talk.observablehq.com/t/yet-another-attempt-to-go-from-observable-to-vanillajs/3328 "2020-05-20T01:17:45Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [May 20, 2020, 6:18am UTC](https://talk.observablehq.com/t/yet-another-attempt-to-go-from-observable-to-vanillajs/3328/2 "2020-05-20T06:18:27Z")

</div>

Hi Shawn,

I don’t think there is an official way to do that. Have you read other posts here on the topic?

> [@Export observablehq js to vanilla js](https://talk.observablehq.com/t/export-observablehq-js-to-vanilla-js/2778/5):
>
> I did read that earlier but what put me off is that I’ll be introducing much than just a bar chart + d3.js CDN into my code. Exactly. I think I’ll try getting myself familiarized with the way observable woks in the near future. @mcmcclur I will have to thank you for the huge help you provided with the explanation and the working code. Thanks again everyone. Have a nice day. Edit: @mbostock Thanks for the info slight_smile

> [@Notebook to Vanilla JavaScript Steps](https://talk.observablehq.com/t/notebook-to-vanilla-javascript-steps/1644/16):
>
> What when I want read from a local file flare.json?

> [@Understanding Observable - Downloading HTML & JS](https://talk.observablehq.com/t/understanding-observable-downloading-html-js/2906):
>
> Hi there ! I’m learning D3 (and HTML and JavaScript and CSS at the same time, it’s a lot of pain !) My goal is to create a local HTML & JS page on my laptop. I was working on small examples that I’m able to download and make them work directly locally like here [https://www.d3-graph-gallery.com/graph/line\_brushZoom.html](https://www.d3-graph-gallery.com/graph/line_brushZoom.html) So far so good, but I’ve found interesting example like here : [https://observablehq.com/@d3/focus-context](https://observablehq.com/@d3/focus-context) But ! I tried to hack it a bit, but quickly realized that all code i…

Here is another great resource if you’re looking into convert a notebook to pure javascript [GitHub - severo/observable-to-standalone: Importing an Observable notebook into a standalone application](https://github.com/severo/observable-to-standalone)

I know this doesn’t respond to your main question. However when you use observable to write code, interactive charts, dynamic data, etc you’re probably using all the cool reactivity feature its runtime provide. In that case, converting to vanilla js can get complicated. Cells that depend on values from other cells are automatic updated [How Observable Runs / Observable | Observable](https://observablehq.com/@observablehq/how-observable-runs), and all that logic might be hard to implement from scratch.

Edit: For reference here is the BubbleMap converted to vanilla. Now, the order of cells are very important, the code has to run async await, so resources are ready in order to run next steps. **All the reactivity is lost**. This notebook was relatively simple to convert, it doesn’t have much interactivity. I wouldn’t do the same some for a complex notebook.

https://codepen.io/radames/embed/GRpPMxQ?height=357&theme-id=light&default-tab=js,result

---

_[View the full topic](https://talk.observablehq.com/t/yet-another-attempt-to-go-from-observable-to-vanillajs/3328)._