The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Libraries
Edited
Mar 28, 2022
1 fork
Importers
114 stars
Insert cell
Insert cell
Insert cell
Insert cell
value1 = "world"
Insert cell
`<h1>Hello ${value1}</h1>`
Insert cell
Insert cell
value2 = "dollars&pounds"
Insert cell
unsafe_html`My favorite currencies are ${value2}.`
Insert cell
Insert cell
safe_value2 = "dollars&pounds".replace(/&/g, "&amp;")
Insert cell
unsafe_html`My favorite currencies are ${safe_value2}.`
Insert cell
Insert cell
Insert cell
html`<i>I’m an element!</i>`
Insert cell
html`I’m simply text.`
Insert cell
html`` // I’m null!
Insert cell
Insert cell
html`I’m an <i>implicit</i> span.`
Insert cell
Insert cell
html.fragment`I’m a <i>document fragment</i>.`
Insert cell
Insert cell
html`Look, Ma, ${"<i>automatic escaping</i>"}!`
Insert cell
html`<font color=${"green"}>This text has color.</font>`
Insert cell
Insert cell
html`<script>${"</script>"}</script>`
Insert cell
Insert cell
html`<span style=${{background: "yellow"}}>It’s all yellow!</span>`
Insert cell
Insert cell
html`<span style="background: ${"yellow; font-style: italic"};">It’s yellow (and italic).</span>`
Insert cell
Insert cell
html`<button onclick=${() => ++mutable clicks}>click me</button>`
Insert cell
mutable clicks = 0
Insert cell
Insert cell
html`<button disabled=${true}>Can’t click me</button>`
Insert cell
Insert cell
html`<button disabled=${null}>Can click me</button>`
Insert cell
html`There’s no ${null} here.`
Insert cell
html`${html``}` // It’s nulls all the way down!
Insert cell
Insert cell
html`<span ${{style: {background: "yellow", fontWeight: "bold"}}}>whoa</span>`
Insert cell
html`<span ${{
onmouseover() { this.style.background = "yellow"; },
onmousedown() { this.style.background = "red"; },
onmouseup() { this.style.background = "yellow"; },
onmouseout() { this.style.background = ""; }
}}>hover me</span>`
Insert cell
Insert cell
function emphasize(text) {
return html`<i>${text}</i>`;
}
Insert cell
html`This is ${emphasize("really")} important.`
Insert cell
Insert cell
html`<table style="width: 180px;">
<thead><tr><th>#</th><th>Color</th><th>Swatch</th></tr></thead>
<tbody>${d3.schemeCategory10.map((color, i) => html.fragment`<tr>
<td>${i}</td>
<td>${color}</td>
<td style=${{background: color}}></td>
</tr>`)}</tbody>
</table>`
Insert cell
html`It’s as easy as ${new Set([1, 2, 3])}.`
Insert cell
Insert cell
svg`<svg width=60 height=60>
${svg.fragment`<circle cx=30 cy=30 r=30></circle>`}
</svg>`
Insert cell
Insert cell
html`<${"button"}>Does this work?</>` // Nope!
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html = htl.html
Insert cell
svg = htl.svg
Insert cell
function unsafe_html() {
const span = document.createElement("span");
span.innerHTML = String.raw.apply(this, arguments);
return span;
}
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