Baseline Feature Compatibility Checker

Automatically checks browser compatibility for any web feature using MDN data and Baseline standards.

Comment

Inspiration

Developers often struggle to know which modern web features are truly safe to use across browsers. Manually checking compatibility is time-consuming and fragmented — even with good documentation like MDN.

That challenge inspired Baseline Feature Compatibility Checker — a simple, open-source web tool that automatically generates and visualizes compatibility reports for CSS, HTML, JavaScript, and Web APIs using official MDN Browser Compat Data.

What it does

The app allows users to type any web feature (e.g., CSS Variables, Web Bluetooth API, HTML Canvas) and instantly see:

*Which browsers support it

Whether it meets *Baseline compatibility (modern web standard)

*A real-time visual summary of the results

It runs locally or through GitHub Actions, ensuring that the dataset always stays in sync with the latest MDN Baseline data.

How we built it

  • Node.js + Express backend for API and data handling
  • Uses the @mdn/browser-compat-data package to auto-discover and analyze over 1800+ features.
  • Auto-generated JSON datasets: baseline-report.json and feature-map.json
  • A lightweight frontend in HTML, CSS, and JavaScript displays the results dynamically.
  • GitHub Actions CI pipeline to regenerate the dataset automatically

Challenges we ran into

  • Mapping human-readable names (like “CSS Variables”) to MDN’s structured feature paths.
  • Handling large datasets efficiently while keeping lookups fast
  • Designing fuzzy search logic that feels intuitive but precise.
  • Keeping data synchronized automatically across GitHub commits

Accomplishments that we're proud of

  • Built a working full-stack compatibility checker from scratch
  • Integrated real MDN Baseline data and CI automation seamlessly.
  • Achieved accurate and fast search through over 1,800+ web features.
  • Delivered a clear and modern interface for instant developer insights.

What we learned

  • Deep understanding of MDN’s Baseline system and data model.
  • How to automate data refresh pipelines using GitHub Actions.
  • How to connect open data with developer tooling in an accessible way.
  • Reinforced the importance of cross-browser consistency for modern web apps.

What's next for Baseline Feature Compatibility Checker

  • Publish a live hosted version (API + frontend).
  • Add bulk analysis and Baseline compliance scanning.
  • Visual dashboards showing feature adoption and trends.
  • ackage as an npm module for CI integration.

🧠 Baseline Feature Compatibility Checker Created by Johana Fajardo (Joydev Tools) for the MDN Baseline Challenge 2025 Empowering developers to build modern, future-proof web experiences. 🌐✨

Built With

Share this project:

Updates