Quarto + Observable Framework

[bradfordjohnson]

TLDR

I would love to easily be able to leverage both the power of Quarto and Observable Framework together in a unified way.

Idea and background information

I use Quarto for my personal portfolio, technical documentation and more. I love it. I recently have tried out Observable Framework for creating dashboards and all I can think about is connecting Observable Dashboards to Quarto projects. Of course Quarto Dashboards exist and it is a very nice feature so please do not take this feature request as disrespectful, I love the Quarto team. I do think the Observable Framework has some interesting features - such as data loaders and continuous deployment for getting updated data / creating snapshots and publishing the site.

I have been able to create a Observable Dashboard within a Quarto Website project and I think even an extension to help configure this like a starter template would be great... I haven't had the time to dive into the extension development process for Quarto, and I'm not yet very experienced in this realm but I'm looking into how to implement one.

How to make an Observable Dashboard a page within a Quarto Site

Assuming you have Node, NPM, Observable Framework and Quarto installed you will want to make a parent directory with 2 children directories, one where you initialize an Observable Framework project, and the other where you create a Quarto website project like so:

root-dir
├── observable-framework-dir
│   ├── docs
│   │   ├── index.md
│   │   └── styles.css
│   ├── observablehq.config.ts
│   └── ...
└── quarto-dir
    ├── _quarto.yml
    └── styles.css
    └── index.qmd
    └── ...

The styles.css is a copy of the selected theme's css being used in Quarto.

Next add the navbar code in the observable-framework-dir/docs/index.md file.

Using observablehq.config.ts the output of the build can be set as a child of the /quarto-dir/ and additional configs can be done in this file and in /docs/index.md in order to use the styles.css and format the Observable output as desired.

The file structure may look like this now (/quarto-dir/observable/ is the Observable build output) :

root
├── observable-framework-dir
│   ├── docs
│   │   ├── index.md
│   │   └── styles.css
│   ├── observablehq.config.ts
│   └── ...
└── quarto-dir
    ├── _quarto.yml
    └── observable
        └── dist
            ├── index.html
            └── ...

Next you can include the build into the Quarto render via the _quarto.yml :

project:
  type: website
  resources:
    - observable/dist/
  output-dir: docs
navbar:
  left: 
    - text: Home
      href: index.qmd
    - text: Observable
      href: observable/dist/index.html

Leaving you with the combined output Quarto site in /quarto-dir/docs/ for a GH actions deployment workflow:

quarto-dir
   └── docs

I'm sure the directories can be cleaned up even more, but this how I got it to work in initial testing/proof of concept.

I believe a template or other extension would be a good way to unify this workflow. For example some quality of life functionalities such as a way to export the navbar code programmatically from Quarto and have it updated in the Observable Framework files, syncing style.css etc.

Even better would be a master YAML file to interact and configure both frameworks.

A smaller feature for Quarto could be the ability to apply configs to already existing .html files.

• For example I have an external html file included and defined as a resource in _quarto.yml... on Quarto render or preview, if navbar code is not found or out of sync then the html file is appended to /overwritten in the output directory with these change made. Same with supporting files such as paths for assets like styles.css and other generated assets / references of assets.

Please let me know if you have any questions or feedback. If this is not a priority for the Quarto team I completely understand and I really appreciate your time and dedication to Quarto! As I said I would love to dive into developing an extension or other solutions myself as a side project, but I thought the Quarto team might find this workflow interesting so I wanted to call it out.

Very Respectfully,
Bradford Johnson

[mcanouil]

I am probably missing something, but isn't it already available in Quarto?

• https://quarto.org/docs/dashboards/interactivity/observable.html
• https://quarto.org/docs/interactive/ojs/index.html

[bradfordjohnson]

Yes, some of the observable framework features exist within Quarto.

I think the root of what I'm looking for is a way to take an existing html file (not generated via Quarto) and deconstruct it into a quarto markdown file so you can more easily include it in a quarto site. Or parse through the html file and add quarto's html and JS elements which are created on quarto render.

If this isn't too realistic we can close it out. I can dig into some extension development or other opportunities.

I appreciate your time!

[mcanouil]

Yes, some of the observable framework features exist within Quarto.

Out of curiosity mostly, as you can install/add modules, what cannot be done with the embedded Observable that required you to basically embed Observable yourself?

I think the root of what I'm looking for is a way to take an existing html file (not generated via Quarto) and deconstruct it into a quarto markdown file so you can more easily include it in a quarto site.

That's not what Quarto is for.
It's not an HTML parser.
HTML/CSS/JS can already and easily be included into any HTML-based document produced by Quarto.
You can use css/theme, include-*, or raw HTML blocks.
Quarto only provides the means to do this, it's up to the users to write the code they need, to include it, and possibly, to share it as a Quarto extension.

Or parse through the html file and add quarto's html and JS elements which are created on quarto render.

I don't understand what you mean/want here.

[bradfordjohnson]

No problem, yes it is that manual process I am interested in making less manual.

The reason I wanted to embed a dashboard made with observable framework was because it's like quarto with code blocks, markdown, and can generate static sites. I like the data loaders and how that is implemented. Not a big difference between the two as most can already be done in quarto. But having a dashboard made using a different framework as a quarto blog listing but matching the quarto site aesthetics was one end goal.

I was making the output of a dashboard created with https://observablehq.com/framework/ look like my quarto site so it could be included with the quarto site but still be created using its node application.

Quarto generates the html based on the quarto yml file, so if I define a new page to the nav bar in that yml file then the changes are reflected in all quarto rendered html pages with the navbar. But I would need to manually add the most updated navbar code in the dashboard page being created using observable framework. I was looking into making this a more unified process as changes in the styles and other aspects would need to be manually adjusted as needed.

[nicucalcea]

Hey @bradfordjohnson, thanks for your notes!

I've gone with a similar approach. I use Quarto's post-render option to run the Observable build process as part of quarto render. There's also a small Python script that overwrites observablehq.config.js with the title and menu links from Quarto so they're nice and consistent.

I've only made it work for my case, but I'll leave a link to some notes for people who stumbled upon this page as I did. Feel free to adapt it to your needs!

[bradfordjohnson]

Hey @nicucalcea - wow, thank you for sharing this! All this time using Quarto and I never knew about or stumbled upon the post render option... haha.

I appreciate your time documenting this and sharing the example you made - going to develop a similar workflow and test some different things out!