Under the hood of MDN's new frontend

MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected Create React App configs, entangled CSS, and the fundamental mismatch between a React wrapper and static documentation content. The new stack uses Lit web components for islands of interactivity, custom server components for static HTML templating, and Rspack (a Rust-based Webpack-compatible bundler) for builds. Key architectural wins include lazy-loading web components by name convention, shipping only the CSS needed per page, progressive enhancement via Declarative Shadow DOM, and a development environment that starts in 2 seconds instead of 2 minutes. The Baseline project guided browser compatibility decisions throughout.