How to use @observablehq/runtime - 7 common examples
To help you get started, we’ve selected a few @observablehq/runtime examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
severo / observable-to-standalone / bundle / joyplot / src / render.js View on Github 
runtime.module(notebook, name => {
switch (name) {
case 'chart':
// render 'chart' notebook cell into <div id="joyplot"></div>
return new Inspector(document.querySelector('#joyplot'));
break;
}
});
}const main = runtime.module(notebook, name => {
switch (name) {
case 'chart':
// render 'chart' notebook cell into <div id="joyplot"></div>
return new Inspector(document.querySelector('#joyplot'));
break;
}
});// Import Observable notebook
import notebook from '@mbostock/psr-b1919-21';
// Import Observable library
import {Runtime, Inspector} from '@observablehq/runtime';
// Render selected notebook cells into DOM elements of this page
const runtime = new Runtime();
const main = runtime.module(notebook, name => {
switch (name) {
case 'chart':
// render 'chart' notebook cell into <div id="joyplot"></div>
return new Inspector(document.querySelector('#joyplot'));
break;
}
});// Import Observable library
import {Runtime, Inspector, Library} from '@observablehq/runtime';
import {customResolve} from './customResolve';
import {customFetch} from './customFetch';
// Fetch data locally
fetch = customFetch;
// Load modules locally
const runtime = new Runtime(new Library(customResolve));
// Render selected notebook cells into DOM elements of this page
export function render(notebook) {
runtime.module(notebook, name => {
switch (name) {
case 'chart':
// render 'chart' notebook cell into <div id="joyplot"></div>
return new Inspector(document.querySelector('#joyplot'));
break;
}
});
}this.observer = dom => {
return new Inspector(dom);
};export function generateRuntime(notebook) {
const {modules, id} = notebook;
var library = new Library();
var map = new Map;
var runtime = new Runtime(library);
const main = runtime_module(id);
function runtime_module(id) {
let module = map.get(id);
if (!module) map.set(id, module = runtime.module());
return module;
}
for (const m of modules) {
const module = runtime_module(m.id);
let i = 0;
for (const v of m.variables) {
if (v.from) {
module.import(v.remote, v.name, runtime_module(v.from));
} else if (module === main) {export function generateRuntime(notebook) {
const {modules, id} = notebook;
var library = new Library();
var map = new Map;
var runtime = new Runtime(library);
const main = runtime_module(id);
function runtime_module(id) {
let module = map.get(id);
if (!module) map.set(id, module = runtime.module());
return module;
}
for (const m of modules) {
const module = runtime_module(m.id);
let i = 0;
for (const v of m.variables) {
if (v.from) {@observablehq/runtime
The **Observable Runtime** implements reactivity in both [Observable Framework](https://observablehq.com/framework/) and [Observable notebooks](https://observablehq.com/documentation/notebooks/).
