Published
Edited
Feb 28, 2019
1 fork
35 stars
Insert cell
Insert cell
viewof foo = synchronize(channel, html`<input name="foo" value="Edit me!">`)
Insert cell
viewof bar = synchronize(channel, html`<input name="bar" type=range>`)
Insert cell
[foo, bar]
Insert cell
function synchronize(channel, input) {
function receive(event) {
if (event.data.type === "hello") {
send(event);
} else if (event.data.name === input.name && input.value !== event.data.value) {
input.value = event.data.value;
input.dispatchEvent(new CustomEvent("input"));
}
}
function send(event) {
if (!event.isTrusted) return;
channel.postMessage({name: input.name, value: input.value});
}
input.addEventListener("input", send);
channel.addEventListener("message", receive);
channel.postMessage({type: "hello"});
return Generators.disposable(input, () => {
input.removeEventListener("input", send);
channel.removeEventListener("message", receive);
});
}
Insert cell
channel = {
const channel = new BroadcastChannel("example");
invalidation.then(() => channel.close());
return channel;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more