Introduction

Observablehq is an online notebook for tools like d3, threejs etc…

In order to display it in Fastpages blog . We need to add a display div element and some <script> from observablehq.

<div id='display'></div>


<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@rahuketu86/observable-demo.js?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
new Runtime().module(notebook, Inspector.into('#display'));

</script>

Here is a displayed notebook