Putting Baseline status directly in your content
Developers know the frustration: you find the perfect technique in a blog post, only to discover deep in the comments that it works in just one browser. Or you watch a conference talk about an exciting new feature, then realize it's experimental. For the last two years, Chrome developer sites have been attaching MDN compat data to posts to address this. Baseline goes further by asking a simpler question — is a feature Baseline Widely available and safe to use everywhere, or is it Baseline Newly available, meaning it's interoperable but new enough that fallbacks might be wise?
web.dev has already started displaying Baseline status on some pages, such as the post on CSS font-size-adjust. Now the component that powers that display is available for anyone to embed.
Embedding <baseline-status>
The web component can be installed from npm or pulled precompiled from a CDN — the installation instructions on GitHub have the details. Once set up, dropping it into a page is straightforward:
<baseline-status featureId="font-size-adjust"></baseline-status>
The component reads the feature's current state from the web features project data, so it automatically updates as a feature moves from Limited availability to Newly available and finally to Widely available. No need to touch your markup when browser support shifts.
Finding the right featureId
The featureId you pass in matches the feature name used in the web-features repository, which is the canonical source for the status data.
Baseline logos for static contexts
For print, exported PDFs, or conference slides, the web component isn't practical — but the Baseline logos are licensed for use in all such materials and can be downloaded in PNG and SVG format. To check a feature's current status before you produce static assets, the Web Platform Status dashboard will show you where it sits on the Baseline scale.
Sharing your usage and ideas
If you embed Baseline into your own site, the project maintainers invite you to add a link to the Baseline in the wild page. They're also open to broader integrations beyond content pages — if you think a developer tool or product could surface Baseline information, you can raise an issue with your proposal.
