Baseline Extension

On hovering over a particular non-safe feature, it shows which browsers support it and suggests safer alternatives.
On hovering over a particular non-safe feature, it shows which browsers support it and suggests safer alternatives.
It also generates a summary showing how many safe and unsafe features are used.
Additionally, it builds a detailed report highlighting all baseline-safe and non-safe features for better analysis.

Inspiration

Developers often face browser compatibility issues while using new web features. We wanted to make it easier to adopt modern APIs confidently without breaking functionality across browsers. That’s what inspired Baseline — to bring real-time compatibility awareness directly into the coding environment.

What it does

Baseline is a Code extension that scans your code, identifies features not supported across all browsers, and provides instant, verified alternatives using MDN Baseline data. It helps developers write browser-safe, future-ready code effortlessly.

How we built it

We integrated the MDN Baseline API with a Code extension using JavaScript and Node.js. The extension parses the code, checks for unsupported web features, and displays inline warnings with compatibility suggestions. We used browser compatibility data and built a simple recommendation engine to suggest fixes.

Challenges we ran into

Parsing and mapping modern web features accurately to Baseline data. Ensuring compatibility checks work efficiently in real-time without slowing the IDE. Handling version differences between browsers and matching feature metadata correctly.

Accomplishments that we're proud of

Successfully integrated live Baseline compatibility checks inside Code. Created an intuitive UI with real-time suggestions and tooltips. Made browser compatibility more accessible and developer-friendly.

What we learned

We learned how to use MDN Baseline datasets, build Code extensions, and optimize background processes for developer tools. It also deepened our understanding of cross-browser development challenges and modern web standards.

What's next for Baseline Extension

Expanding to other IDEs like JetBrains and Sublime. Adding AI-driven code correction for unsupported features. Integrating Baseline checks into GitHub Actions and CI/CD pipelines for automatic compatibility reports. Building a web dashboard for analytics and browser support insights.