<BaselineBanner/> - A component for displaying baseline status in your content

• GitHub repo: https://github.com/MrSunshyne/baseline-banner
• npm package: https://www.npmjs.com/org/baseline-banner

BaselineBanner provides a set of simple components and functions to check & display the baseline status of any CSS feature at runtime. You can already do that by going to webstatus.dev/baseline, manually. But if you're writing a blog post or a documentation, you can use BaselineBanner to display the compatibility information directly in your content.

Here are some examples of how you can use BaselineBanner:

Why ?

As I was writing a blog post about CSS if() function and CSS random() function, I wish I could display the compatibility information directly in my content, because those statuses change overtime but I want the blog post to remain relevant without having to update it manually or keeping track of the feature's status.

I remember there was an api available to get the baseline data, so I decided to create a simple vue component to display the information within my blogposts. Then I thought perhaps it could be useful for others too, so I decided to publish it as a npm package. https://www.npmjs.com/org/baseline-banner. I learned a lot about publishing packages in this process.

I also saw this video on ChromeDevs channel about Baseline Tooling Hackathon 2 days ago, so things were lining up pretty well to go ahead and make this a real project. Maybe I can submit this for the hackathon too

Enter <BaselineBanner>

<BaselineBanner> provides ready-to-use components that display real-time compatibility information using MDN's web-features data. It shows you the baseline status for any CSS feature:

• ✅ Widely Available - Safe to use in production
• 🟡 Newly Available - Recently became baseline
• 🔴 Limited Availability - Use with caution
• ❓ Unknown - Data not available

Framework Support

I use vue and nuxt mostly but since I wanted this to be available to other people, it makes sense to extract the core logic and styles into a separate package and then create wrappers for other frameworks.

Nuxt Support via ClientOnly

Nuxt has a special component called ClientOnly that allows you to only render the component on the client side. This is useful because we want to avoid rendering the component on the server side as it can cause problems with hydration. This is what i'm using in the current blog you're reading.

But doesn't BaselineStatus already exist?

BaselineStatus is another project that provides a Web Component to display the baseline status of any CSS feature.

Yes it does, and I had no idea I was midway through building the project. I kept going anyway because BaselineStatus serves a Web Component and my goal was to provide simple components for other frameworks. This is going to be a great source of inspiration !

Getting Started

Vue 3 Setup

pnpm add @baseline-banner/vue @baseline-banner/styles

<script setup>
import { BaselineChecker } from '@baseline-banner/vue'
import '@baseline-banner/styles'
</script>

<template>
  <BaselineChecker feature-name="container-queries" />
</template>

React Setup

pnpm add @baseline-banner/react @baseline-banner/styles

import { BaselineChecker } from '@baseline-banner/react'
import '@baseline-banner/styles'

function App() {
  return <BaselineChecker featureName="container-queries" />
}

Intellisense through TypeScript

There's a types file derived from the web-features data, so you'll get intellisense when you're using it.

What I couldn't do

I tried checking if the newly announced css "random()" function was there to be checked, but turns out it's not even listed on baseline yet. Maybe it's too early? I guess we'll find out soon !

What's next

• Add support for more frameworks
• Improve the look and feel of the banner
  • WebDev theme
  • MDN theme
  • Other themes ?

Contributing & Roadmap

The project is open source on GitHub and contributions are welcome!

Try It Today

You can experiment with BaselineBanner right now:

• Vue 3 Example: Clone the repo and run cd examples/vue3 && pnpm dev
• React Example: cd examples/react && pnpm dev

Or just install it in your existing project and start showing your users which CSS features are safe to use!

Links:

• BaselineBanner on GitHub
• MDN Web Platform Features
• Web Platform Baseline
• Vue Package on npm
• React Package on npm