Baseline is an initiative that brings clarity to browser support for web platform features, giving developers confidence about which features are stable and safe to use. While it establishes a trusted foundation, developers often still wonder how those features interact with their own code and where each feature stands in its adoption journey. This recurring uncertainty inspired me to build Baselineage, a tool designed to extend the value of Baseline and embed it into a developer’s day-to-day workflow. Baselineage transforms static compatibility data into an interactive experience. It allows developers to search for any web feature and instantly see its Baseline status, compare two features side by side with adoption timelines across major browsers, and paste or type code directly into a live editor where unsupported or experimental features are flagged in real time. Beyond simple lookups, it provides a full Baseline checker that highlights every detected feature in a code snippet, helping developers understand compatibility before errors occur.
I built the project using React and TypeScript, with CodeMirror powering the live code editor and custom linter. TailwindCSS ensures a professional and responsive UI, while the feature dataset was enriched with Baseline information, browser version support, and relevant keywords to ensure accurate detection. Designing a linter that gives real-time feedback without overwhelming the user was a challenge, as was curating the dataset to balance accuracy, breadth, and usability. The biggest accomplishment was turning Baseline data into something actionable. Instead of browsing compatibility tables, developers can now interactively see how features impact their code and compare adoption histories in an intuitive format. This made the project feel like a natural extension of Baseline, bridging the gap between documentation and developer experience.
Through this project, I learned the importance of connecting clarity with usability. Baseline provides a powerful standard, but it only reaches its full potential when developers have tools that meet them where they code. I also gained valuable experience structuring datasets, building custom editor extensions, and designing interfaces that balance technical depth with simplicity. Looking forward, I plan to extend Baselineage by introducing coverage scoring to help developers measure how baseline-friendly their entire codebase is. Future enhancements include suggesting polyfills or fallbacks for non-Baseline features, offering integration as a VS Code extension, and adding analytics dashboards for teams. My vision is for Baselineage to become a must-have companion tool that empowers developers to write modern, reliable, and future-proof code with confidence.
Built With
- cloud-services
- codemirror6
- levenshtein
- react
- tailwindcss
- typescript
- web-features
Log in or sign up for Devpost to join the conversation.