Some Live Code Cells


let count = 0;
let intervalId;

const displayElement = display(htl.html`<div class="demo">${count}</div>`);

function updateCounter() {
    displayElement.textContent = count;
    count = ++count % 10;
}
// Start the counter after initial display
intervalId = setInterval(updateCounter, 1000);
// Stop the counter when the cell is invalidated (e.g., when re-run)
invalidation.then(() => clearInterval(intervalId));
o = {
  let o = 0;
  while (true) {
    if (o >= 1) { o = 0; }
    yield o;
    o += 0.02;
  }
}

Blink

<p class="demo" style=opacity:${o}>Blink</p>
<style>
  .demo {
    color:red;
    font-weight:bold;
    font-size:2vw;
  }
</style>
viewof count = {
  let i = 0;
  const button = html`<button>Count: ${i}`;
  button.onclick = () => {
    button.textContent = `Count: ${++i}`;
    button.dispatchEvent(new CustomEvent("input"));
  };
  return button;
}