# Export final code? **URL:** \ **Category:** Help\ **Created:** [February 1, 2018, 4:04am UTC](https://talk.observablehq.com/t/export-final-code/109 "2018-02-01T04:04:15Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![mhebrard](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mhebrard/32/75_2.png) [@mhebrard](https://talk.observablehq.com/u/mhebrard)\ **Post date:** [February 1, 2018, 4:04am UTC](https://talk.observablehq.com/t/export-final-code/109/1 "2018-02-01T04:04:15Z")
Hello ! amazing šŸ™‚ one question: let say I finish my awesome notebook with a nice viz as result. is there a way to save a .js file with the code ? ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [February 1, 2018, 4:26am UTC](https://talk.observablehq.com/t/export-final-code/109/2 "2018-02-01T04:26:13Z")
Not yet, but we are planning on open-sourcing the notebook runtime so that you can save your notebook as a JavaScript bundle and run it outside of Observable. Stay tuned! ---
**Author:** ![ontouchstart](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/ontouchstart/32/100_2.png) [@ontouchstart](https://talk.observablehq.com/u/ontouchstart)\ **Post date:** [February 1, 2018, 2:55pm UTC](https://talk.observablehq.com/t/export-final-code/109/3 "2018-02-01T14:55:49Z")
I signup for the forum to ask the same question. What I am also interested in is the other way around, i.e., upload/import a notebook as a JavaScript bundle from local disk or external host. In the sample [https://beta.observablehq.com/@mbostock/introduction-to-notebooks](https://beta.observablehq.com/@mbostock/introduction-to-notebooks), I can see that notebook can import another notebook hosted on [observablehq.com](http://observablehq.com), [https://beta.observablehq.com/@mbostock/randomized-flood-fill](https://beta.observablehq.com/@mbostock/randomized-flood-fill) is it possible to import/export notebook as standard ES6 module with custom configuration fields in package.json? Thanks. ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [February 1, 2018, 3:23pm UTC](https://talk.observablehq.com/t/export-final-code/109/4 "2018-02-01T15:23:57Z")
You can import an ES module using the standard [dynamic import](http://2ality.com/2017/01/import-operator.html). For example, hereā€™s how to load d3-fetch as an ES module: ```auto d3 = import("d3-fetch") ``` Or more explicitly: ```auto d3 = import("https://unpkg.com/d3-fetch@1.0.1/index.js?module") ``` Note that in the case of D3 modules, importing as ES modules is typically much slower than requiring: ```auto d3 = require("d3-fetch") ``` Thatā€™s because the D3 modules are authored as many small files, so importing d3-fetch as an ES module triggers 15 requests, whereas requiring d3-fetch loads its UMD bundle, which is only a single request. You can also `import("d3")`, but that triggers a whopping 550 requests! (In the near future, Iā€™ll probably release new versions of the D3 modules with `module` entry points in the package.json pointing to minified ES modules, rather than a deep tree of files, so that dynamic import is faster. In that case importing `d3` will trigger only about thirty requests: one per D3 module.) So you can publish your own ES modules, either to npm or to a server of your choosing, and then import them into your Observable notebook. You can convert your Observable notebook to a standard ES module (by hand for now), but since ES imports arenā€™t reactive and donā€™t support `with` for injection like Observable imports, the two are not exactly equivalent. ---
**Author:** ![chriszrc](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/chriszrc/32/536_2.png) [@chriszrc](https://talk.observablehq.com/u/chriszrc)\ **Post date:** [February 6, 2018, 3:57pm UTC](https://talk.observablehq.com/t/export-final-code/109/6 "2018-02-06T15:57:56Z")
With the notebook runtime, does that mean weā€™d be able to run and develop our notebooks locally? This is my #1 most wanted feature, and I think a prerequisite for seeing wider adoption and competing with jupyter- ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [February 6, 2018, 5:23pm UTC](https://talk.observablehq.com/t/export-final-code/109/7 "2018-02-06T17:23:48Z")
As of last night, Observable will now store any unsaved changes to [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) if you go offline while editing a notebook. This means you can continue working while offline and your changes will be stashed on your local computer, even if you reload the page or quit your browser. The next time you get online and visit your notebook, these stashed changes will be automatically synchronized with the cloud and saved. (This automatic synchronization of stashed changes _only_ happens if you havenā€™t concurrently edited your notebook on another computer in the meantime. In the future, I expect weā€™ll have a user interface for resolving merge conflicts or letting you confirm the application of stashed changes.) Weā€™re also looking at implementing [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/) so that you can use Observable entirely offline. (Meaning, you donā€™t have to be online to start editing; we cache your notebooks on disk for offline editing.) But this isnā€™t trivial to implement, particularly since notebooks often load data and libraries from the web, so I canā€™t promise a specific date as to when this feature will be released. The intent of the export feature is primarily to allow you to run your notebook outside of Observable, say to drive a realtime dashboard or to integrate an interactive chart prototyped in Observable in your app. ---
**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:** [February 7, 2018, 6:05pm UTC](https://talk.observablehq.com/t/export-final-code/109/8 "2018-02-07T18:05:55Z")
I am getting a: ```auto SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. ``` would this change be related? Code to reproduce: ```auto hpccMap = require("@hpcc-js/map") ``` ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [February 7, 2018, 6:18pm UTC](https://talk.observablehq.com/t/export-final-code/109/9 "2018-02-07T18:18:03Z")
@GordonSmith That error is not related to this thread. The issue is that the library you are requiring (the [HPCC Visualization Framework](https://github.com/hpcc-systems/Visualization) tries to access localStorage within your notebook, and because notebooks are sandboxed, you get a security error. Notebooks currently share a domain ([static.observableusercontent.com](http://static.observableusercontent.com)), so we canā€™t add enable allow-same-origin in the sandbox; see [Jeremyā€™s post](https://talk.observablehq.com/t/iframe-sandbox-attribute/193/2?u=mike). A fix for this problem would be to change the HPCC library to only use localStorage if allowed. That is, the library should catch and handle the security error. In the future, we might offer separate domains for notebooks so that we can enable allow-same-origin. But for now localStorage (and cookies, and sessionStorage) are off limits from within notebooks. ---
**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:** [February 7, 2018, 6:39pm UTC](https://talk.observablehq.com/t/export-final-code/109/10 "2018-02-07T18:39:25Z")
Thanks for the info. I didnā€™t think that library accessed local storage (I am the author) but a dependency might be. Am also surprised its being accessed during the require as these modules should be ā€œpureā€. (found it - loaded each dependency one at a timeā€¦) ---
**Author:** ![michael](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/michael/32/176_2.png) [@michael](https://talk.observablehq.com/u/michael)\ **Post date:** [February 8, 2018, 12:17pm UTC](https://talk.observablehq.com/t/export-final-code/109/11 "2018-02-08T12:17:47Z")
Glad to hear you are planning to open source the runtime! I think this is an important step in order to qualify for open scientific workflows. As far as export is concerned: We are working on a spec (+ tools) for language-agnostic reproducible publications. The overall goal is to [enable submissions to scientific journals](https://elifesciences.org/labs/7dbeb390/reproducible-document-stack-supporting-the-next-generation-research-article). Weā€™d be happy to consider a workflow for turning Observable notebooks into full-fledged journal submissions (including abstract, bibliography etc.) and later be able to run the code directly on a journalā€™s website. We recently did a community webinar, so if uā€™re interested you can watch a few minutes of demos and intros. ---
**Author:** ![anandthakker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/anandthakker/32/181_2.png) [@anandthakker](https://talk.observablehq.com/u/anandthakker)\ **Post date:** [February 9, 2018, 12:44am UTC](https://talk.observablehq.com/t/export-final-code/109/12 "2018-02-09T00:44:47Z")
> you can save your notebook as a JavaScript bundle and run it outside of Observable @mbostock does ā€œbundleā€ here mean something more like a compiled executable, a source file, or maybe a bit of both? Iā€™ve been wondering about (some day) being able to hack on scripts/tools that could consume or produce notebooks. ---
**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\ **Post date:** [February 13, 2018, 12:01am UTC](https://talk.observablehq.com/t/export-final-code/109/13 "2018-02-13T00:01:39Z")
I donā€™t exactly understand where Observable is saving/hosting notebooks? Are they versioned / can we see edit history? Are they in a git repository (or can they be put into one)? Is there a file format for notebooks (or maybe a multi-plain-text-file-in-a-directory format)? Maybe this should be a new topic, but I would really love to be able to edit notebooks in my own text editor, push changes to github, and see updates in the online browser version (and vice versa). IDEs / text editors could have an observable mode created to integrate an offline runtime, etc. Basically, if itā€™s a plain text format built on regular files in a directory, then I can use whatever tools I want, and am not stuck in a browser. If not, I have to put in more manual work to copy/paste between local files and little browser text boxes. ---
**Author:** ![jojolosangeles](https://avatars.discourse-cdn.com/v4/letter/j/76d3ee/32.png) [@jojolosangeles](https://talk.observablehq.com/u/jojolosangeles)\ **Post date:** [March 3, 2018, 3:11pm UTC](https://talk.observablehq.com/t/export-final-code/109/14 "2018-03-03T15:11:36Z")
+1 Import/export a notebook would work for me as well, it is hard to work without version control. ---
**Author:** ![jonasalmeida](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jonasalmeida/32/166_2.png) [@jonasalmeida](https://talk.observablehq.com/u/jonasalmeida)\ **Post date:** [March 6, 2018, 4:26pm UTC](https://talk.observablehq.com/t/export-final-code/109/15 "2018-03-06T16:26:50Z")
watched your video and checked webpage. Indeed Observable looks like the right solution for literate publication, particularly when import/export, open source runtime etc is available. looks like that would also allow to engage Observableā€™s runtime from a gh-page. ---
**Author:** ![jonasalmeida](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jonasalmeida/32/166_2.png) [@jonasalmeida](https://talk.observablehq.com/u/jonasalmeida)\ **Post date:** [March 6, 2018, 4:31pm UTC](https://talk.observablehq.com/t/export-final-code/109/16 "2018-03-06T16:31:03Z")
> [@mbostock](#): > > Weā€™re also looking at implementing Service Workers so that you can use Observable entirely offline. this sounds fantastic! I guess this would also allow us to develop observable notebooks as gh-pages. ---
**Author:** ![kelleyvanevert](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kelleyvanevert/32/169_2.png) [@kelleyvanevert](https://talk.observablehq.com/u/kelleyvanevert)\ **Post date:** [March 30, 2018, 10:19am UTC](https://talk.observablehq.com/t/export-final-code/109/17 "2018-03-30T10:19:32Z")
This would really awesome. Talking use cases, I think it would be benificial to enable at least two kinds of exports: not just (1) a javascript bundle with all the newest javascript bundling details that modern web developers are into, for coders, but also (2) a ā€˜immediately usable blog-postā€™ kind of export, say with a html file included that layouts a document somewhat like the original notebook (maybe including reacitivity, maybe without, Iā€™m not sure). This would target not-yet-so-experienced javascript developers, teachers, visual coders not into the details of javascript packaging, etc. ---
**Author:** ![CodeXmonk](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/codexmonk/32/495_2.png) [@CodeXmonk](https://talk.observablehq.com/u/CodeXmonk)\ **Post date:** [April 17, 2018, 12:47pm UTC](https://talk.observablehq.com/t/export-final-code/109/18 "2018-04-17T12:47:04Z")
Thank you for all of your great work!!! I found Observable when I was looking for a solution to integrate d3.js into [tiddlywiki5](https://tiddlywiki.com/) for its comfortable UI and standalone notebook style. So, question for the Wizards: is it a totally crazy idea trying to integrate the two system? I mean Observable and tiddlywiki5? Would their architecture allow trying it? Yours sincerely, CodeXmonk ---
**Author:** ![rocksetta](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rocksetta](https://talk.observablehq.com/u/rocksetta)\ **Post date:** [April 25, 2018, 4:45am UTC](https://talk.observablehq.com/t/export-final-code/109/19 "2018-04-25T04:45:51Z")
I like observables for really allowing me to understanding what is happening with the data and with concept visualization, but at some point I need to get back to writing Javascript for specific Web Applications. I know from Tom MacWright that the plan is to be able to export an observable as pure Javascript. Any thoughts from the community? Is this something you really want, or is it not very important (Observables are fine on their own) I would really like to be able to export the awesome Observables into Javascript so that I can work with either platform. I think it would strengthen the importance of the Observable as a Javascript teaching tool. Presently it is easy to take a Javascript page and make it into an observable, but the other direction is fairly difficult to do. ---
**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\ **Post date:** [April 28, 2018, 4:31pm UTC](https://talk.observablehq.com/t/export-final-code/109/20 "2018-04-28T16:31:03Z")
I think exporting will be great feature because 1. Many Independent observable notebooks, will be very good static standalone web apps themselves (living on separate domain) 2. Notebooks can be injected into separate things (web apps, blogs, articles ) 3. We may want to hide some variables info (a.k.a, edit generated code) ā€¦ I think this list will be big ---
**Author:** ![sbryfcz](https://avatars.discourse-cdn.com/v4/letter/s/b5a626/32.png) [@sbryfcz](https://talk.observablehq.com/u/sbryfcz)\ **Post date:** [May 18, 2018, 12:00pm UTC](https://talk.observablehq.com/t/export-final-code/109/21 "2018-05-18T12:00:43Z")
I am loving Observable for my own data analysis and exploration. Its extremely easy and flexible. However, I doubt Iā€™ll be able to leverage this for the majority of work I do. Because of organizational restrictions, I wonā€™t be able to upload and analyze our data in ā€œthe cloudā€. An on-prem solution would be ideal. I understand the community is a huge goal of Observable, but I worry without an on-prem offering, you might be limiting your audience. Instead, Iā€™m guessing many organizations will continue to use other notebooks like Jupyter. Just my 2 cents. All this being said, keep up the fantastic work. I will try to use Observable as much as I can. [Next page](https://talk.observablehq.com/t/export-final-code/109.md?page=2)