A terminal in a page

The panel below is a Textual application: CPython compiled to WebAssembly, running in this tab, rendering into an xterm.js terminal. It is one element among several on this page rather than the page itself.

starting…

How the buttons work

The page publishes nothing to the application and the application publishes nothing to the page. The only thing crossing between them is a keystroke:

document.querySelector("[data-key]").addEventListener("click", (event) => {
  globalThis.textualWasm.input(event.currentTarget.dataset.key);
});

globalThis.textualWasm appears once the app is running and carries input(), screen(), columns, rows and a finished promise. That is the whole surface.