# How browsers work

> An illustrated browser explainer showing URL entry, network connections, HTML parsing, layout boxes, raster tiles, JavaScript compilation, and site isolation through sketchbook and blueprint-style diagrams.

- Kind: Video
- Page: https://meetreference.com/v/ref-how-browsers-work-animation/
- Ready-to-use agent handoff: https://meetreference.com/v/ref-how-browsers-work-animation/agent.txt
- Authorship: AI-made, per the source
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: Plain JavaScript
- Style: Explainers; blueprint, hand-drawn, technical diagrams, paper texture, pastel accents, educational, robot mascot
- Length and format: 40 sec, 16:9 (1280x720 source)
- Playback: a muted visual reference. The original soundtrack is available only at the source.
- Shared by @addyosmani in X, Sep 24, 2026: https://x.com/addyosmani/status/2103009037164110327
- Prompt fidelity: Unavailable in this entry. The recreation brief is written by Reference.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this video

This is a visual reference. No original creator prompt is available. The following brief was written by Reference after inspecting the work.

Use a consistent technical-drawing system of fine outlines, measurement ticks, circular guides, and restrained accent colors to explain an otherwise invisible process. Vary the diagram topology by concept: trees for hierarchy, tiles for parallel work, linked nodes for stages, and enclosed panels for boundaries. Alternate pale paper illustrations with navy blueprint views, retaining a small mascot and fixed heading positions for continuity. For a new subject, replace the browser-specific labels and mechanisms with its actual process, and increase contrast on secondary annotations.

1. Open the live work or source and inspect the frame images below.
2. Adapt its layout, hierarchy, palette, and interaction patterns to the user's own content and brand.
3. Compare the result against the reference. Use your own assets and credit the original creator.

## What it looks like

Written by Reference from the video frames, not by the creator.

Technical explainer about browser rendering, with labeled diagrams of DNS, HTTP connections, the DOM, CSS, JavaScript, site isolation, and rasterization.

- Color: Deep navy with fine blue, cyan and violet linework, muted white labels and occasional warm cream backgrounds.
- Type: Small, clean sans-serif labels and headings, mostly white or muted blue.
- Framing: Wide technical diagrams sit beneath compact headings. Circular guides, fine rules and a small robot motif connect branching trees, process stages and framed browser windows.
- Structure: DNS and HTTP diagrams lead to the DOM and computed styles, followed by raster tiles, a compilation pipeline, isolated site windows and a completed browser page.

Storyboard, nine frames spread across the video: https://meetreference.com/media/ref-how-browsers-work-animation/storyboard.webp

- Frame 1 at 2.2s: https://meetreference.com/media/ref-how-browsers-work-animation/f1.webp
- Frame 2 at 6.7s: https://meetreference.com/media/ref-how-browsers-work-animation/f2.webp
- Frame 3 at 11.1s: https://meetreference.com/media/ref-how-browsers-work-animation/f3.webp
- Frame 4 at 15.6s: https://meetreference.com/media/ref-how-browsers-work-animation/f4.webp
- Frame 5 at 20.0s: https://meetreference.com/media/ref-how-browsers-work-animation/f5.webp
- Frame 6 at 24.4s: https://meetreference.com/media/ref-how-browsers-work-animation/f6.webp
- Frame 7 at 28.9s: https://meetreference.com/media/ref-how-browsers-work-animation/f7.webp
- Frame 8 at 33.3s: https://meetreference.com/media/ref-how-browsers-work-animation/f8.webp
- Frame 9 at 37.8s: https://meetreference.com/media/ref-how-browsers-work-animation/f9.webp

## Links

- Watch: https://x.com/addyosmani/status/2103009037164110327
- Original post: https://x.com/addyosmani/status/2103009037164110327