Toy browser engine

Goal

Build a small but real web browser in Python following Web Browser Engineering (Panchekha & Harrelson). Every stage of the pipeline — networking, parsing, styling, layout, paint, JS integration — stops being folklore once you have implemented a version of it, and the diagnostic instincts transfer straight back to DevTools.

Subject: full brief & instructions

Practices

• Browser internals — the entire concept, implemented: parsing, the rendering pipeline, the event loop.
• Web performance — why layout and paint cost what they cost becomes obvious when you write them.
• Networking fundamentals — the URL-to-bytes half: sockets, HTTP, TLS by hand.

Milestones

1. Bytes on screen. Open a socket, speak enough HTTP to fetch a page, strip tags, and draw scrollable text in a window. A "browser" exists from day one.
2. Trees. Parse HTML into a DOM tree (mind the malformed-markup reality), then build a layout tree with real block layout — sizes and positions computed, not guessed.
3. Style. Parse CSS, implement the cascade and inheritance, resolve styles per node; your <b> finally bolds because a stylesheet said so.
4. A real browser. Chrome around the page: clickable links, history, an address bar, forms with a working submit.
5. JavaScript. Embed a JS engine, expose DOM bindings, wire event handlers — and meet the single-threaded event loop from the implementer's side.

Stretch goals

• The later chapters: animations and compositing, embedded content, browser security.
• Profile your engine on a heavy page and find your layout thrashing.
• Write up how each chapter maps onto Chromium's actual architecture.

Related

• Browser internals — the concept note whose # Practice cites this.
• Toy browser engine — subject — the stage-by-stage assignment and acceptance checks.
• Web performance — the measurement layer over what you just built.
• Design system from scratch — the sibling flagship, one layer up the stack.