BaseLine Checker

• 

  Hover and Baseline feature in a HTML file

• 

  Hover and Baseline feature in a CSS file

• 

  Hover and Baseline feature in a JS file

Inspiration

Developers constantly waste time switching between docs, MDN, Caniuse and WebStatus to check if a feature is safe to use. We wanted to solve this problem by bringing compatibility insights directly into the coding workflow inside VS Code.

What it does

Baseline Checker is a VS Code extension that integrates the WebStatus API to provide real-time insights about HTML, CSS, and JavaScript features. When developers hover over a feature, they instantly see production readiness, browser support, release history, and links to official references—without leaving their editor.

How we built it

We used the VS Code Extension API (hover providers, decorations, and panels) with TypeScript. The WebStatus API was consumed via undici for HTTP requests. We designed hover tooltips, gutter icons, and a panel view to present feature details in an accessible way.

Challenges we ran into

Understanding and integrating the WebStatus API structure. Handling multiple selections, group selectors, and edge cases like pseudo-classes. Debugging hover content not rendering all required info. Fixing packaging issues (e.g.401 errors with PAT while publishing).

Accomplishments that we're proud of

Built a fully working VS Code extension that seamlessly integrates WebStatus. Enabled instant developer feedback on feature readiness and browser compatibility. Packaged and published the extension successfully to the VS Code Marketplace. Reduced the need for developers to context-switch while coding.

What I learned

How to develop and publish a VS Code extension end-to-end. Best practices in using the WebStatus API. The importance of developer experience: small UI improvements like hover tables and icons greatly improve usability. How to handle extension publishing with PATs and packaging rules.

What's next for BaseLine Checker

Adding support for inline diagnostics/warnings for unsupported features. Expanding beyond HTML, CSS, and JavaScript to frameworks and libraries. Allowing customization of feature highlights and notifications. Offline caching of WebStatus data for faster lookups. Collaboration features like shared team compatibility reports.

Built With

• markdownrendering
• node.js/npm
• typescript
• undici
• vsce(visualstudiocodeextensionmanager)
• vscode
• vscodeextensionapi
• webstatusapi