# Announcing Observable 2.0! **URL:** \ **Category:** Announcements\ **Created:** [February 15, 2024, 3:44pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744 "2024-02-15T15:44:17Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![allisonhorst](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/allisonhorst/32/6794_2.png) [@allisonhorst](https://talk.observablehq.com/u/allisonhorst)\ **Post date:** [February 15, 2024, 3:44pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/1 "2024-02-15T15:44:17Z")
Today we’re launching [Observable 2.0](https://observablehq.com/product) with a bold new vision: an open-source static site generator for building fast, beautiful data apps, dashboards, and reports. Read the [announcement from founder Mike Bostock](https://observablehq.com/blog/observable-2-0). The cornerstone of Observable 2.0 is **Observable Framework**. With Framework, you can: - Write data loaders in whatever language you want (Python, R, SQL, JavaScript, or anything else) to pre-prep data snapshots for fast page loads. Framework projects are just local files, so can easily integrate into your existing tools and workflows. - Use built-in themes and components for the fastest path to beautiful data displays — or write your own code for limitless customization. - Write vanilla JavaScript with Observable’s reactive runtime for flexible and fluid development. - Deploy anywhere. Or, deploy to Observable with one command. And, Framework pairs perfectly with Observable notebooks for rapid, collaborative data exploration and prototyping. Get started with Framework today: - Follow along with our [Getting started tutorial](https://observablehq.com/framework/getting-started) to build and deploy your first project in minutes - Explore the [Observable Framework documentation](https://observablehq.com/framework) We encourage you to share what and how you’re building with Observable Framework in [Show and Tell](https://talk.observablehq.com/c/show-and-tell/7)! ---
**Author:** ![allisonhorst](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/allisonhorst/32/6794_2.png) [@allisonhorst](https://talk.observablehq.com/u/allisonhorst)\ **Post date:** [February 15, 2024, 3:46pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/2 "2024-02-15T15:46:12Z")
Pinned on February 15, 2024, 3:46pm UTC ---
**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 15, 2024, 5:23pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/3 "2024-02-15T17:23:14Z")
This is really nice and I welcome the new direction! I do have one question - doesn’t this obsolete your paywall model? ---
**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 15, 2024, 7:45pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/4 "2024-02-15T19:45:49Z")
> [@GordonSmith](#): > > doesn’t this obsolete your paywall model? Yes. Observable is now free again for individuals, including private notebooks and databases connectors. And you can pay for larger (\>5) teams and more hosted projects. Our business focus is on productionizing (i.e., hosting and compute) data apps for teams. Observable Framework is open-source, so it’s free for you to do whatever you like with it. But if you’re building data apps professionally, our hope is that we offer a compelling complementary paid service for you to host and maintain your (often private) data apps on Observable. We make it easy for you to share data apps securely with your team or customers or clients or whoever, and we manage the complexities of keeping your app & data up-to-date with continuous deployment, scheduled builds, access control, collaboration, monitoring, analytics, _etc._ This starts with `observable deploy` today and will get better over time. (And we think notebooks are a nice complement to Framework projects too, so you can quickly try out ideas.) ---
**Author:** ![erdirstats](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/erdirstats/32/7607_2.png) [@erdirstats](https://talk.observablehq.com/u/erdirstats)\ **Post date:** [February 15, 2024, 8:18pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/5 "2024-02-15T20:18:17Z")
Congrats! I skimmed through the Framework documentation and examples and it looks very nice! Thank you for making this available for free! Being a big fan of Observable Inputs/Plot, I have experimented with creating similar dashboards with [quarto](https://quarto.org/docs/dashboards/interactivity/observable.html): - [example 1](https://erdirstats.github.io/ojs-03/ojs-03.html) - [example 2](https://erdirstats.github.io/ojs-02/ojs-02.html) From a first look, it seem like these 2 frameworks (_Framework_ and _quarto dashboards_) overlap a lot, from the perspective of creating interactive dashboards. What do you think are the main advantages for using Framework? _ps: very excited to start creating something with Framework_ 😄 ---
**Author:** ![oscar6echo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/oscar6echo/32/647_2.png) [@oscar6echo](https://talk.observablehq.com/u/oscar6echo)\ **Post date:** [February 15, 2024, 10:08pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/6 "2024-02-15T22:08:15Z")
Alleluia ! Alleluia ! 🙏 This is a FANTASTIC news !!! I just read the announcement, but given the quality of (better: the intelligence in) d3, Observable, Plot, I have zero doubt Framework will impress me juste the same ! Will read the doc _very_ carefully. It turns out I “agree”: I had been thinking: too bad the fantastic table ‘component’ could not be used outside notebooks; beyond a certain size, a notebook was becoming cumbersome; the export mechanism was a bit contrived. Going back to a ‘regular’ dev experience feels like breaking free, and does actually free the mind 🦋 Just one problem: > [@mbostock](#): > > > [@GordonSmith](#): > > > > doesn’t this obsolete your paywall model? > > Yes. Observable is now free again for individuals, including private notebooks and databases connectors. And you can pay for larger (\>5) teams and more hosted projects. I find the d3, Observable, Plot initiatives so good that I wanted to pay, by principle, and because beyond a few leisure notebooks I can only use these high quality tools inside thick corporate walls… Solemnly, thank you and all the people working on this endeavour 🙇‍♂️ ---
**Author:** ![javpascal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/javpascal/32/8498_2.png) [@javpascal](https://talk.observablehq.com/u/javpascal)\ **Post date:** [February 16, 2024, 2:43am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/7 "2024-02-16T02:43:25Z")
I just played with and deployed the demo project, and it worked like a charm. Framework is SO GOOD, and I can see it drastically speeding up my front dev. From a business perspective, custom embedding of these reports / dashboards in my own application is a key use case. Will you develop more sharing features? Some example ideas: - Expanding the sharing capabilities to non-users (email or SSO) - Using custom domains - Sharing parts from the “standalone” dash/report only. For example, being able to only embed one page or card in my app, as opposed to needing to load the whole project and then hiding the non-needed parts. Thanks for the great work in any case, really excited to build on top of this! ---
**Author:** ![javpascal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/javpascal/32/8498_2.png) [@javpascal](https://talk.observablehq.com/u/javpascal)\ **Post date:** [February 16, 2024, 8:59am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/8 "2024-02-16T08:59:06Z")
A follow-up on the self-deployment; the documentation says: > The `build` command generates the `dist` directory; you can then copy this directory to your static site server or preferred hosting service. To preview your built site locally, you can use a local static HTTP server such as [http-server](https://github.com/http-party/http-server) With http-server the website renders perfectly fine; however I failed to get it running on Github Pages. I took the “dist” folder and cloned it in a Github repo and served it as Pages; however all styling and interactivity were stripped off, basically rendering the basic HTML. I guess the deployment indeed needs a server, and can’t be simply rendered as a static page? Or am I missing something here? ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [February 16, 2024, 11:20am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/9 "2024-02-16T11:20:35Z")
> [@javpascal](#): > > I guess the deployment indeed needs a server That is definitely true. You can’t open an HTML file generated by Observable Framework directly in a webpage and expect it to work, for example. I don’t know anything about GitHub pages but there must be a server for [github.io](http://github.io) - right? So, I wouldn’t think that’s the problem. ---
**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\ **Post date:** [February 16, 2024, 11:54am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/10 "2024-02-16T11:54:35Z")
Yup. It needs an http server, but does not need an app server. I guess more precise would be that you need a static web server instead of a dynamic web server as described [here](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server#). ---
**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 16, 2024, 11:58am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/11 "2024-02-16T11:58:00Z")
FWIW it worked as expected on GH Pages for me: Built Site: [Observable Framework](https://gordonsmith.github.io/framework/) Repo (with GH Action to build and publish sources on push): [GitHub - GordonSmith/framework: A static site generator for data apps, dashboards, reports, and more](https://github.com/GordonSmith/framework) ---
**Author:** ![javpascal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/javpascal/32/8498_2.png) [@javpascal](https://talk.observablehq.com/u/javpascal)\ **Post date:** [February 16, 2024, 12:17pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/12 "2024-02-16T12:17:25Z")
Oh that’s interesting! Not sure why it didn’t work for me, will check your repo tomorrow - thanks! FWIW It worked well when deployed as static site on Digital ocean; the only issue I saw was that the links between pages need to include a “.html” for the pages to be loaded correctly. ---
**Author:** ![javpascal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/javpascal/32/8498_2.png) [@javpascal](https://talk.observablehq.com/u/javpascal)\ **Post date:** [February 16, 2024, 2:42pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/13 "2024-02-16T14:42:39Z")
OK using Github actions made the trick - thanks so much @GordonSmith ! ---
**Author:** ![mferro64](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mferro64/32/6421_2.png) [@mferro64](https://talk.observablehq.com/u/mferro64)\ **Post date:** [February 16, 2024, 9:16pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/14 "2024-02-16T21:16:35Z")
This is great! It will simplify a process we have been putting in place to create dashboards. I have created a variety of Observable Notebooks using plot - are they compatible with the framework - i.e. exporting…? I want to get my dev team looking at the framework so I can focus on the data, analysis, and visualization. ---
**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 16, 2024, 11:01pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/15 "2024-02-16T23:01:35Z")
> [@mferro64](#): > > I have created a variety of Observable Notebooks using plot - are they compatible with the framework - i.e. exporting…? The Framework CLI supports a `convert` command for downloading an Observable notebook and converting it to Markdown, _e.g._, ```sh observable convert @d3/bar-chart ``` will download the notebook and save a **bar-chart.md** and **alphabet.csv** to your current working directory. (We did it from the command line so it’s easy for you to automate or batch-convert or refresh and keep things in sync.) You may have to make some tweaks to the code due to Framework’s vanilla JavaScript syntax, but we’ll work on making that more seamless over time. ---
**Author:** ![allisonhorst](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/allisonhorst/32/6794_2.png) [@allisonhorst](https://talk.observablehq.com/u/allisonhorst)\ **Post date:** [February 17, 2024, 12:05am UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/17 "2024-02-17T00:05:34Z")
Hi @erdirstats! I’m a big fan of both Quarto (I still use it for my personal website, and as a “lab notebook” for data exploration, modeling, & stats projects) and Observable Framework! A few things I am especially excited about in Observable Framework: - Data loaders (in R, Python, or anything else!) to pre-prep data snapshots for fast page loads. This was a bit of an adjustment at first, but now it makes my pages faster _and_ my dashboards better, because I’m more deliberate about what a viewer needs to see - Framework pages are beautiful out of the box, and the built-in themes are 🔥 - The `grid` & `card` css classes actually make custom dashboard layouts feel fun. This is not something I had experienced before 😂 - It’s really fast to get started with Framework. If you get a chance, check out the [Getting started](https://observablehq.com/framework/getting-started) guide. We’ll look forward to hearing about your experience & seeing what you build with Framework! ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [February 17, 2024, 12:08pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/18 "2024-02-17T12:08:49Z")
@mbostock When I copy and run your `observable create` command, I get the following error: ``` observable: unknown command 'convert'. See 'observable help'. ``` I tried to ensure that my `observable` command line is up to date by running ``` npm update observable ``` but that did not fix the problem. ---
**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 17, 2024, 3:17pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/19 "2024-02-17T15:17:08Z")
It’s because you have an old version of Framework installed. You need to upgrade `@observablehq/framework` not `observable` (the package name not the command name). You may also need to upgrade your global install depending on how you’re running it. (And if you’re using the Early Access version we gave you, you may have to edit your `package.json` to point to the ^1.0.0 release on npm.) ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [February 17, 2024, 3:55pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/20 "2024-02-17T15:55:27Z")
> [@mbostock](#): > > It’s because you have an old version of Framework installed. Yes, I’m sure you’re right. Note that the command `observable version` returns 0.0.50. I can’t seem to figure out the magic incantation to update it,though. I’ve tried ``` npm upgrade @observablehq/framework ``` and ``` sudo npm upgrade @observablehq/framework -g ``` Both commands appeared to install something but neither has had the desired effect. > [@mbostock](#): > > you may have to edit your `package.json` This doesn’t make sense to me. I would think that you would run the `observable convert` command to create a new project based on a notebook. Thus, there wouldn’t be a `package.json` file yet. Nonetheless, I did try to ``` observable create ``` to start a new package and then ran an `observable convert` command from within there. Still no luck. ---
**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\ **Post date:** [February 17, 2024, 11:40pm UTC](https://talk.observablehq.com/t/announcing-observable-2-0/8744/21 "2024-02-17T23:40:32Z")
@mcmcclur I get confused by npm, so I’m not the best guide to why it goes awry, but I can at least try to help you get it to work! I was getting the same error, but `yarn global upgrade @observablehq/framework` worked for me. (I installed it with yarn, not npm.) Try `which observable` (to see where the version that runs is coming from), or `npm list -g` or `yarn global list` (to see what versions of `@observablehq/create` and `@observablehq/framework` you may have installed globally). You might also have a version of the old pre-release `@observablehq/cli` lying around, which could be confusing things. In general, I find it easier to manage packages per-project. To create a new project, I run `npm init @observablehq` instead of the global `observable create`. If I want to ensure I’m creating a project with the latest version of Framework, I clear the cache with `rm -rf ~/.npm/_npx` and then run `npm init @observablehq`. Inside a project, to use the _local_ version of the observable command, you can run `npm run observable convert @d3/bar-chart`. (But that always seems to write the md to the project root for me, even if my working directory is /docs.) > I would think that you would run the `observable convert` command to create a new project based on a notebook. A notebook is more analogous to one Markdown page within a project, not a whole project itself, so `convert` outputs a .md file. A project is more like a folder of notebooks, so creating a new project should be much more rare than creating a new notebook. For that matter, a Framework page may not even be that analogous to a notebook. To riff a little on the “cultural” differences between notebooks and Framework projects: as we’ve acclimated to the strengths of each medium, we’ve come to think of notebooks as more like ephemeral open-ended scratchpads, and pages as more stable productionized artifacts. That means different things for different people and different notebooks, but, when we convert an internal notebook analyzing some business metrics to a page in our BI project, we don’t just adjust the syntax. We rewrite dynamic queries as more static data loaders optimized for the most important cases. We rethink the layout to be more of a dense 2D dashboard and less of a literary report. And we may condense several different notebooks exploring different aspects into a single project page, which takes up more “space” because it has to live in the same global project navigation. To me this learning experience is a lot like learning Plot after D3. At first I try to recreate my favorite D3 things in Plot, and struggle with how that seems to go against the grain; then, gradually, I learn Plot’s strengths, and start making things I would never have tried with D3. And I also grow more comfortable with just sticking with D3 for the things it works better for! [Next page](https://talk.observablehq.com/t/announcing-observable-2-0/8744.md?page=2)