Import code from ObservableHQ project to a Framework project

Hi! I’m exploring Observable Framework and it’s really interesting!

There is one thing however that i don’t understand, and probably I’m missing something.

How can I export/import a project from the observablehq platform into a Framework project?

I tried by using “export/download code” but it seems to create a package useful to be self-hosted but not relaly compatible with Framework.

So, which is the best way for doing that? In my practice would be very useful since you can draft and collaborate on a project using observableHq and then refine it using Framework.

furthermore, is there a way to import cells from Other observable projects? (e.g. swatches from Color legend / D3 | Observable)?

2 Likes

Ho @mamauri

Good question! There are 2 ways to support that workflow.

  1. There is a Framework convert command (not documented yet) that converts a public notebook to a .md file that you can use in Framework.
    yarn observable convert <url>

  2. You can also copy and paste the cells into a .md file (you can copy and paste multiple cells…) and do some minor editing.

In both cases, if you are using notebooks contributed by others, please ensure that it has an open-source license and include proper attribution.

For the d3 color legend question, it may just be easier to use Observable Plot :slight_smile:

2 Likes

Thanks @Cobus!

Love this hidden command :slight_smile: thank you for the heads up, I will pay attention to licenses when reusing code.

I’ll also look better int plot, since usually i write my own charts i got used to import legends in that way.

1 Like

One of the challenge, I noticed is the “import of cells from other notebook”. It does not work !!.

I appreciate the response and the hidden command; I have been wondering about maintaining workflow continuity between ObservableHQ and Framework.

furthermore, is there a way to import cells from Other observable projects? (e.g. swatches from Color legend?

@Cobus: I would also appreciate it if you could consider this a general inquiry about the import cell functionality rather than focusing on the color legend example. Ideally, I would (fetch,) pre-process, and pre-visualize my datasets on ObservableHQ, then import the processed datasets into Framework using data loaders. Is there any way to utilize the existing import cell functionality from ObservableHQ within the Framework?

Update: I have read that importing entire notebooks into Framework isn’t supported in other posts here and on GitHub, but I’m curious about importing specific cells. If there were a way to fetch preprocessed (live*) data from Observable, it would significantly enhance the feasibility of a Framework-based main workflow for me.

* E.g., Yahoo Finance → ObservableHQ Preprocessing → Framework Visualization