How lit-html renders
One template, from the code you write to the DOM: the tagged template literal, prepare, create, update, and the caches in between. About 11 minutes.
Transcript
About
Based on lit's design doc,
Life of a lit-html render,
and the source, lit-html.ts.
The strings, markers, parts and DOM shown on screen were captured by running the example through the real
lit-html 3.3.3 (development build, with its debug log events on).
The narration was voiced by Gemini 3.8 Flash TTS (the Schedar voice), one paragraph per call, and word-aligned with a forced aligner, so the animation can land on the words. Each frame is drawn on a canvas as a pure function of time and rendered in headless Chromium. The live version is the same renderer running in your browser. Source: agent-1/lit-html-explainer.