A curated list of awesome things related to MDN Web Docs.
MDN is an open-source, collaborative project by Mozilla in partnership with a global community of volunteers and partners. This repository lists resources and projects, highlighting official and community-built tools for MDN authors, and a list of projects that incorporate data from MDN.
Contents:
- About MDN - MDN's mission, team, partners, and projects.
- Curriculum - Structured learning resources and modules for web development education.
- Content Repo - Source repository for MDN's (en-US) documentation and examples.
- Rari - MDN's build system.
- Fred - MDN's frontend built using web components, Lit, and server-side rendering.
- BCD - Browser compatibility data for web technologies used on MDN and other projects.
- Firefox release notes for developers - Changes in Firefox releases that developers can target in their projects.
- MDN Blog - Official blog with updates, news, and insights from the MDN team.
Please open a PR to have your tools featured in this list.
- skyclouds2001/mdn-tool - A tool focusing on maintaining mdn/data repo, using feature information from content repo, bcd to keep data consistent with latest browser support.
- OnkarRuikar/markdownlint-rule-search-replace - A markdownlint plugin built to handle custom linting needs of the MDN content.
- xyy94813/mdn-site - Helper scripts for MDN translation tasks, such as initializing an environment, copying specific files, and adding origin commit hashes to translated files in
mdn/translated-content. - cheeslide/mdn-translation-analytics - An automated service powered by GitHub Action to help translators find jobs through analysis.
- PassionPenguin/mdn_l10n_helper - A helper site for comparing the localized content of a specific branch and repository against the latest
mdn/contentsource content. - tristantheb/history-content (es, fr, ja, ko, pt-br, ru, zh-cn, zh-tw) - This is a dynamic project that displays changes to pages in translated languages, allowing contributors to easily see which pages need to be updated or translated in all languages in the mdn/translated-content repository.
- Web platform missing reference pages - Displays documentation missing from MDN, filtered by the Baseline status or browser implementation.
- MDN Macro Syntax - This VSCode extension allows content and l10n contributors to view macro syntax, quickly write new macros, see explanations of their usage, and access several other features that make reading and translating pages easier (see the extension documentation).
Here are some projects using data from BCD as an npm module or directly:
- Add-ons Linter - NPM package that checks add-ons for features that aren't supported by the targeted Firefox version. Used by addons.mozilla.org and the web-ext tool.
- ast-metadata-inferer - NPM package that annotates JavaScript AST nodes with metadata derived from BCD data. Used by eslint-plugin-compat.
- BCD Watch - Website that shows a weekly report of BCD changes.
- caniuse - Website that shows browser support tables based on caniuse and BCD data.
- caniuse-lite - NPM package that republishes BCD data in the caniuse format.
- CanIUse Embed - Service that allows embedding caniuse (including BCD data) into any website.
- css-declaration-sorter - NPM package that sorts CSS properties alphabetically.
- csstype - NPM package that publishes strict TypeScript/Flow types for CSS.
- Compat Report - Firefox Add-on that shows BCD data for the current site in the developer tools.
- compat-tester - NPM package that scans HTML, CSS, and JS files for compatibility issues.
- JetBrains WebStorm - IDE that uses BCD data to check browser support of used CSS properties (see 2019.1 releasenotes) by generating feature lists with support data.
- JSR - Package registry that uses BCD data to generate a list of web builtins.
- Mozilla Firefox - Web browser that uses BCD data in the DevTools to show CSS property compatibility data mapped against a list of non-retired browsers.
- TypeScript - A programming language that uses BCD data to generate DOM typings.
- Visual Studio Code - IDE that uses BCD to show compatibility information for CSS features (see VSCode 1.25 release notes), and to extract MDN urls for HTML elements.
- web-features - NPM package that publishes web feature groups with Baseline statuses based on BCD data.
- web-features-explorer - Website that visualizes web features by Baseline status and month.
webhint.io- Tool that uses BCD to checks CSS and HTML for unsupported features (see@hint/utils-compat-datapackage).- World Wide Web Consortium (W3C) - An international community that develops web standards uses BCD to link MDN documents to the features in the published web standards.
Here are some quick links to MDN community channels:
MDN's resources are freely available under various open-source licenses. For detailed information on reusing MDN content, check our Attribution and copyright licensing page.