Published
Edited
Mar 24, 2019
Insert cell
Insert cell
Insert cell
{
const div = html`<div></div>`
const button = lithtml.html`<button @click=${onClick}>click!</button>`
lithtml.render(button, div)
return div
}
Insert cell
Insert cell
{
const div = html`<div></div>`
const button = () => lighterhtml.html`<button onclick=${onClick}>click!</button>`
return lighterhtml.render(div, button)
}
Insert cell
Insert cell
{
const button = nanohtml`<button onclick=${onClick}>click!</button>`
return button
}
Insert cell
Insert cell
{
const button = html`<button>click!</button>`
button.onclick = onClick
return button
}
Insert cell
Insert cell
lithtml = import('https://unpkg.com/lit-html@1.0.0/lit-html.js')
Insert cell
lighterhtml = import('https://unpkg.com/lighterhtml?module')
Insert cell
nanohtml = await require('https://unpkg.com/nanohtml@1.4.0/dist/bundle.js')
Insert cell
function onClick (e) {
e.target.textContent = Date.now()
}
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