The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
Oct 12, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
output = html`<div>Like <strong>this</strong></div>`
Insert cell
Using the <b>HTML</b> cell type
Insert cell
Using the **Markdown** cell type
Insert cell
{
let foo = document.createElement("div");
foo.innerHTML = "Via native <b>JavaScript</b>"
return foo;
}
Insert cell
Insert cell
Insert cell
{
// create a HTML block
const out = html`<div>Some HTML: <span></span></div>`
// then yield it
yield out;
// you can then manipulate it
out.querySelector("span").innerHTML="<b>(Added later)</b>"
// note out is a local variable here.
}
Insert cell
Insert cell
{
const out=html`<span>The value is ${range}`
yield out;
}
Insert cell
Move the slider to see the value change in HTML
Insert cell
viewof range = Inputs.range([0, 100], {label: "Amount"})
Insert cell
Insert cell
<div class="myClass">Hey, I'm some HTML!</div>
Insert cell
html`<style>
.myClass {
background-color: ${color};
padding: 8px;
}
</style>`
Insert cell
Insert cell
Insert cell
Insert cell
<style>
div {
font-family: sans-serif;
}
</style>
Insert cell
Insert cell
Insert cell
added = "I got added" // each var it's own cell
Insert cell
{
const out=html`<div><b>${added}</b></div>`;
yield out;
}
Insert cell
### DOM Poke Way
Insert cell
{
const out=html`<div><b></b></div>`;
yield out;
out.querySelector("b").appendChild(html`<i>I got added</i>`)
}
Insert cell
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