My dashboardSign in

Fundamentals · State to screen

DOM and virtual DOM-style app

Illustrative system design for a state to screen app like DOM and virtual DOM: 4 topics to read, from requirements to deep dives.

Illustrative design, not DOM and virtual DOM’s actual implementation. Arrowbox is not affiliated with DOM and virtual DOM’s owner. Disclaimer

Start with The DOM Sign in to start readingUpdated 2 Oct 2026

Core

  • The DOM as a live treeBeginner · 34 min read · Sign in to read

    The DOM is an object tree the browser keeps in sync with the screen: every write can invalidate style and layout, and some reads force the browser to compute them right now.

  • Events and delegationBeginner · 27 min read · Sign in to read

    An event travels from the window down to its target and bubbles back up, so one listener on the list can handle clicks on every item, including items added later.

  • Virtual DOM and reconciliationIntermediate · 42 min read · Sign in to read

    A virtual-DOM framework re-describes the whole UI from state, diffs the new description against the old one with two cheap heuristics, and commits only the differences to the real DOM.

  • Beyond diffing: signals and compiled updatesAdvanced · 29 min read · Sign in to read

    Instead of re-rendering and diffing, some frameworks track exactly which DOM nodes read which piece of state and update only those, either through runtime signals or through code a compiler writes for you.