A comprehensive monorepo toolkit for helping developers safely adopt modern web features using Baseline data. This professional-grade developer toolkit provides CLI analysis, CI/CD integration, visual reporting, and upgrade guidance.
Demo Video: Baseline Toolkit | Baseline Tooling Hackathon Submission
Try it out: Baseline Toolkit Dashboard
Core Features:
- CLI tool for batch analysis and JSON report generation
- Interactive dashboard for visualizing Baseline compatibility
- Shared core library for consistent feature analysis
- Configuration system with project-level settings
- Upgrade advisor for modernizing legacy code
Design Elements:
- Clean and sophisticated UI for the dashboard
- Responsive design optimized for all screen sizes
- Smooth animations and micro-interactions for enhanced user experience
- Consistent spacing system and modern typography
Shared analysis engine powering all tools.
Key Features:
- HTML, CSS and JavaScript AST parsing using CSSTree and Acorn
- Integration with
web-featuresandcompute-baseline - TypeScript-first with full type definitions
- Configurable analysis rules and feature filtering
Command-line tool for project analysis and JSON report generation.
# Navigate to the CLI package
cd packages/cli
# Install dependencies if you haven't already
pnpm install
# Run the CLI to analyze your project and generate a JSON report
node bin/baseline-check.js <path-to-your-project> --jsonnode bin/baseline-check.js src/test/ --config baseline.config.json --json
node bin/baseline-check.js src/test/ --json --fail-on-risky
@baseline-toolkit/dashboard Web dashboard for visualizing Baseline JSON reports.
Web dashboard for visualizing Baseline JSON reports.
Features:
- Upload JSON reports generated by the CLI
- Interactive charts showing feature distribution
- Per-file analysis with safety scores
- Filterable views for different Baseline statuses
- Export capabilities for reports
Dashboard URL: https://baseline-toolkit-dashboard.vercel.app/
Real-time linting extension (currently in development - next release). As well as automatic analyzer of code base solution and renders it in dashboard automatically (currently in development - next release)
Planned Features:
- Live diagnostics with squiggly underlines
- Detailed hover tooltips with browser support info
- Code actions for common fixes and fallbacks
Note: The extension is not yet complete. The CLI is currently the primary method to generate Baseline JSON reports.
- Node.js 18+ and pnpm 8+
- VS Code (for extension development)
# Clone repository
git clone https://github.com/JonathanSolvesProblems/Baseline-Toolkit.git
cd baseline-toolkit
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm testDevelopment
pnpm dev
pnpm -F @baseline-toolkit/dashboard dev
pnpm -F @baseline-toolkit/core test
Configuration
Create a baseline.config.json file in your project root:
{ "rules": { "allowLow": false, "blockFalse": true }, "ignore": ["css-container-queries", "idle-detection"] } Configuration Options
rules.allowLow: Allow features with "low" Baseline status
rules.blockFalse: Block features with "false" Baseline status
ignore: Array of feature IDs to skip during analysis
This keeps headings, code blocks, and lists consistent with standard README formatting.
# Run all tests
pnpm test
# Run tests with coverage
pnpm test --coverage
# Run tests for a specific package
pnpm -F @baseline-toolkit/core test🏗️ Architecture Monorepo Structure packages/ ├── core/ # Shared analysis engine ├── cli/ # Command-line tool ├── extension/ # VS Code extension (in development) └── dashboard/ # Web dashboard Technology Stack
TypeScript, Vite, React, Tailwind CSS, Recharts
CSSTree & Acorn for AST parsing
Jest, ESLint & Prettier for testing and code quality
📊 Baseline Integration
Uses official Baseline data via web-features and compute-baseline
Supports Browser Compatibility Data (BCD)
CLI parses project files, extracts features, maps them to Baseline, and generates JSON reports
Dashboard consumes JSON to visualize safety scores and risky features
🤝 Contributing
Fork the repository
Create a feature branch
Make your changes with tests
Ensure all tests pass
Submit a pull request
Guidelines
TypeScript strict mode
Maintain 80%+ test coverage
Conventional commit messages
JSDoc for public APIs
📄 License
MIT License — see LICENSE file. 🔗 Links
Baseline Toolkit leverages the deepseek/DeepSeek-V3-0324 model to provide context-aware, AI-powered suggestions for improving code safety and compliance with web feature baselines. This model is used to analyze reports generated by the CLI and generate actionable insights for developers.
- AI Endpoint:
https://baseline-toolkit-ai-api.vercel.app/api/ai - Model:
deepseek/DeepSeek-V3-0324 - Integration: Node.js + Hosted on vercel + Express server for local testing
- Purpose: Summarize Baseline reports, suggest safer alternatives for risky features, and provide guided recommendations
- Environment Variables: Requires
GITHUB_TOKENfor authentication with the AI service
Once your Baseline JSON report is generated via the CLI, you can send it to the AI server:
curl -X POST https://baseline-toolkit-ai-api.vercel.app/api/ai \
-H "Content-Type: application/json" \
-d '{"prompt": "Summarize the Baseline report and suggest improvements"}'The AI response will provide human-readable guidance on risky features, per-file safety, and potential upgrades to modern, safer web features.
This integration allows developers to quickly interpret large reports and take actionable steps without manually combing through every file.