--- title: Under the hood of MDN's new frontend | daily.dev description: MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected... canonical: https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Under the hood of MDN's new frontend | daily.dev og:description: MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected... og:url: https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat og:image: https://api.daily.dev/og/posts/TEqGsJvAT.png og:image:alt: Under the hood of MDN's new frontend og:image:width: 1200 og:image:height: 630 og:locale: en --- [MDN Blog](https://daily.dev/sources/mdnblog) [Read post](https://api.daily.dev/r/TEqGsJvAT) # [Under the hood of MDN's new frontend](https://api.daily.dev/r/TEqGsJvAT "Go to post") 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. [#webdev](/tags/webdev "Check all #webdev posts")[#react](/tags/react "Check all #react posts")[#web-components](/tags/web-components "Check all #web-components posts") Apr 08•27m read time•From [developer.mozilla.org](https://api.daily.dev/r/TEqGsJvAT "developer.mozilla.org") [](https://api.daily.dev/r/TEqGsJvAT "Go to post") Table of contents [MDN's architecture](https://api.daily.dev/r/TEqGsJvAT?a=mdns%5Farchitecture "MDN's architecture")[Why we rebuilt MDN's frontend](https://api.daily.dev/r/TEqGsJvAT?a=why%5Fwe%5Frebuilt%5Fmdns%5Ffrontend "Why we rebuilt MDN's frontend")[Enter web components](https://api.daily.dev/r/TEqGsJvAT?a=enter%5Fweb%5Fcomponents "Enter web components")[Server components and web components (on the server)](https://api.daily.dev/r/TEqGsJvAT?a=server%5Fcomponents%5Fand%5Fweb%5Fcomponents%5Fon%5Fthe%5Fserver "Server components and web components (on the server)")[Shipping only what's required](https://api.daily.dev/r/TEqGsJvAT?a=shipping%5Fonly%5Fwhats%5Frequired "Shipping only what's required")[Baseline](https://api.daily.dev/r/TEqGsJvAT?a=baseline "Baseline")[The development environment](https://api.daily.dev/r/TEqGsJvAT?a=the%5Fdevelopment%5Fenvironment "The development environment")[Get involved](https://api.daily.dev/r/TEqGsJvAT?a=get%5Finvolved "Get involved") 205.4K Impressions104 Upvotes2 Reposts Comment Bookmark Copy Share your thoughtsPost [](https://daily.dev/sources/mdnblog) [MDN Blog](https://daily.dev/sources/mdnblog "https://daily.dev/sources/mdnblog") MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering arti... Read more 373 Followers • 2.3K Upvotes #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends 104 ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Under the hood of MDN's new frontend","url":"https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat"},"datePublished":"2026-04-08T01:26:30.209Z","dateModified":"2026-04-08T01:27:00.245Z","description":"MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/025a9fb97b060347eba577268170aad9?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/025a9fb97b060347eba577268170aad9?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"MDN Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"MDN Blog","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/236034d60b694d00b5fb9a5a5d6b57ae","url":"https://daily.dev/sources/mdnblog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":104},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,react,web-components","timeRequired":"PT27M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"MDN Blog","item":"https://daily.dev/sources/mdnblog"},{"@type":"ListItem","position":3,"name":"Under the hood of MDN's new frontend"}]} ```