1. MDN Blog
  2. Launching MDN's new front end
Screenshot of the new MDN homepage showing a search modal with the text 'Launching MDN's new front end 🎉' and search results for HTML, CSS, JavaScript, Web APIs, and SVG, with highlighted keywords and the MDN logo on the right.

Launching MDN's new front end

Author avatar The MDN Team ⁨2⁩ minutes read

In a big step forward for our platform architecture, we're rolling out a completely rebuilt front end for MDN — redesigned and reengineered from the ground up. After months of work, the Mozilla MDN team is proud to release this major update today. Whether you're checking out the latest Web APIs or brushing up on HTML basics, you'll notice the cleaner interface and improved experience right away.

We've intentionally targeted Baseline "Widely available" features when deciding on which ones to use, and polyfilling or progressively enhancing when using anything Baseline "Newly available". This means we're able to adopt modern CSS and web components for our UI. We'll dive into all of the implementation details in an upcoming article.

UI improvements

Along with this architectural overhaul, we've made a few updates to the site to improve usability and readability, focusing on refinement and consistency rather than big, drastic changes.

We have:

  • Improved typography for readability.
  • Added a code font for consistent and high-quality code rendering across different platforms.
  • Refreshed icons using the Lucide library.
  • Added a new search modal that lets you quickly find content from anywhere on MDN.
  • Redesigned the top navigation to help you discover all the content MDN has to offer more readily.

Comparison showing an MDN's reference page before and after.

What's next

We're committed to keeping MDN evolving and improving. The MDN team welcomes your feedback as we continue to iterate. Feel free to come chat with us in the #platform channel on our Discord. If you spot any issues, please raise them in the fred GitHub repository. Let us know what's working for you and where we can do better — after all, MDN is built by developers, for developers.