Embedding Hydra in Quarto

[mroberts1]

I'm trying to embed Javascript sketches of Hydra (a live-coding environment) as modules in Quarto pages:
https://github.com/ojack/hydra-sync

I've tried embedding two Observable notebooks using ```{ojs}:
https://observablehq.com/@jfhbrook/an-attempt-to-set-up-hydra-in-observable
https://observablehq.com/@magfoto/hydra-synth

I tried both importing these notebooks and downloading, then installing them as local JS modules in my Quarto directory.

There's a hydra-synth npm module, but I haven't been able to embed it in a Quarto page. I also tried embedding Hydra sketches as a p5.js instance, but again no success.

I'm particularly baffled as to why I can't get the Observable notebook above to render a Hydra sketch in a Quarto page, even though it renders just fine on Observable itself, with the same code.

Unfortunately I'm very much a beginner to Javascript and only just started using Observable, so any suggestions would be much appreciated!

[mcanouil]

Observable is not really JavaScript.
Also, if you want us to help, and because time is not an unlimited resource, could you share a small "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````