Skip to content


This component will generate a compatibility table based on the browser compatibility data passed into it. The key is to pass the component the correct data.

All our browser compatibility data files can be found in /src/data/browser-compat-data.

To use the component, your docs page must be in .mdx format. Please change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.


Import the component and the relevant data file like so:

import BrowserCompat from "/src/components/docs/BrowserCompat";
import data from "/src/data/browser-compat-data/monetization.json"; /* this is the key */

Use the <BrowserCompat> component in your docs page where relevant under a “Browser compatibility” heading like so:

## Browser compatibility
<BrowserCompat json={data} />

Working example

A visible example of this component is not available yet. Since we don’t have a working Web Monetization extension, there’s no need to display a browser compatibility table in the documentation.