https://github.com/pengzhanbo/caniuse-embed
Embed the CanIUse compatibility table in your site
https://github.com/pengzhanbo/caniuse-embed
astro browser-compat-data caniuse mdn web-features
Last synced: 4 months ago
JSON representation
Embed the CanIUse compatibility table in your site
- Host: GitHub
- URL: https://github.com/pengzhanbo/caniuse-embed
- Owner: pengzhanbo
- License: mit
- Created: 2024-04-25T14:43:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-17T09:22:24.000Z (5 months ago)
- Last Synced: 2026-01-17T20:38:04.199Z (5 months ago)
- Topics: astro, browser-compat-data, caniuse, mdn, web-features
- Language: TypeScript
- Homepage: https://caniuse-embed.vercel.app
- Size: 1.29 MB
- Stars: 18
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - pengzhanbo/caniuse-embed - Embed the CanIUse compatibility table in your site (TypeScript)
README
# CanIUse Embed
Embed up-to-date data from [caniuse.com](https://caniuse.com/) and
[mozilla's browser compat data](https://github.com/mdn/browser-compat-data).
Displays feature support data for multiple versions of the 10 major browsers.
Configurable, reliable, and fully responsive.
## Document
See [Documentation](https://caniuse-embed.vercel.app/) for more details.
## Usage
Include the following javascript file in your document.
```html
```
Paste this snippet where you want the embed `caniuse` to be displayed:
```html
```
Or use the following snippet for `baseline` data:
```html
```
## Example
## Why ?
In the past, I often embedded CanIUse data in my technical documents using [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/). However, I found that when embedding it, it required loading [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) (14MB) and [caniuse/full-data.json](https://github.com/Fyrd/caniuse) (4MB), totaling over 18MB of data, and then needed to be parsed at runtime, resulting in less than 10kb of effective data.
**This consumes too much traffic and seriously affects loading speed!**
Therefore, I decided to redevelop using [Astro](https://astro.build/) and deploy to [Vercel](https://vercel.com/).
By using **Astro** SSR, a completely independent static page is generated for each feature without requesting any data, and each page is no more than 20kb in size!
Meanwhile, using Github Actions to trigger **Vercel**'s **deployment hooks** every weekend, regenerating new pages and caching them as static files every 7 days to ensure data timeliness.
## Thanks
- [mdn-browser-compat-data](https://github.com/mdn/browser-compat-data)
- [Fyrd/caniuse](https://github.com/Fyrd/caniuse)
- [web-platform-dx/web-features](https://github.com/web-platform-dx/web-features)
## LICENSE
MIT