DOM manipulation

document.querySelector, createElement, addEventListener — the vanilla JS toolkit.

Code example

const btn = document.querySelector('#run-btn');
btn.addEventListener('click', () => {
  const cell = document.createElement('div');
  cell.className = 'cell';
  cell.textContent = 'new cell';
  document.querySelector('#canvas').appendChild(cell);
});

How it works

The DOM (Document Object Model) is the browser's in-memory representation of the HTML page. JS can query it (querySelector), create new nodes (createElement), mutate them (textContent, className, setAttribute), and insert them (appendChild, innerHTML). Event listeners fire when the user interacts (click, keydown, input). The notebook's addCodeCell, renderCell, renderOutput functions are pure DOM manipulation — no framework needed.