or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api-data.mdcss-data.mdindex.mdl10n-data.md
tile.json

tessl/npm-mdn-data

Open Web data by the Mozilla Developer Network containing structured JSON data for web technologies including CSS properties, selectors, functions, at-rules, Web API inheritance, and localization strings used in MDN Web Docs

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mdn-data@2.24.x

To install, run

npx @tessl/cli install tessl/npm-mdn-data@2.24.0

index.mddocs/

MDN Data

MDN Data is a comprehensive collection of structured JSON datasets for web technologies maintained by Mozilla's MDN team. It provides machine-readable data about CSS properties, selectors, functions, at-rules, Web API inheritance relationships, and localization strings used throughout MDN Web Docs.

Note: The MDN team is in the process of deprecating the mdn-data package in favor of w3c/webref. If you depend on this project, they encourage feedback in their community GitHub discussions.

Package Information

  • Package Name: mdn-data
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install mdn-data

Core Imports

const mdnData = require('mdn-data');
const { api, css, l10n } = require('mdn-data');

ES modules:

import mdnData from 'mdn-data';
import { api, css, l10n } from 'mdn-data';

Basic Usage

const { api, css, l10n } = require('mdn-data');

// Access Web API inheritance data
const inheritanceData = api.inheritance;
console.log(inheritanceData.DocumentFragment);
// { "inherits": "Node", "implements": ["ParentNode", "LegacyQueryInterface"] }

// Access CSS properties data
const cssProperties = css.properties;
console.log(cssProperties.color);
// { "syntax": "<color>", "media": "visual", "inherited": true, ... }

// Access CSS functions data
const cssFunctions = css.functions;
console.log(cssFunctions['rgb()']);
// { "syntax": "rgb( <percentage>{3} [ / <alpha-value> ]? )", ... }

// Access localization strings
const cssL10n = l10n.css;
console.log(cssL10n.absoluteLength['en-US']);
// "absolute {{cssxref(\"length\")}}"

Architecture

MDN Data is organized into three main modules:

  • API Module: Web API interface inheritance and mixin implementation data
  • CSS Module: Comprehensive CSS specification data including properties, functions, selectors, types, units, syntaxes, and at-rules
  • L10n Module: Localization strings for CSS terminology across multiple languages

All data follows strict JSON schemas and is validated for consistency. The package serves as a foundational data source for MDN Web Docs and external tools like CSSTree parser.

Capabilities

API Data Access

Web API interface inheritance relationships and mixin implementations for understanding the Web API object model.

const api = {
  inheritance: InheritanceData;
};

interface InheritanceData {
  [interfaceName: string]: {
    inherits: string | null;
    implements: string[];
  };
}

API Data

CSS Data Access

Complete CSS specification data including properties, functions, selectors, types, units, syntaxes, and at-rules with detailed metadata.

const css = {
  properties: CSSPropertiesData;
  functions: CSSFunctionsData;
  selectors: CSSSelectorsData;
  types: CSSTypesData;
  units: CSSUnitsData;
  syntaxes: CSSSyntaxesData;
  atRules: CSSAtRulesData;
};

interface CSSPropertiesData {
  [propertyName: string]: {
    syntax: string;
    media: string;
    inherited: boolean;
    animationType: string;
    percentages: string;
    groups: string[];
    initial: string;
    appliesto: string;
    computed: string;
    order: string;
    status: string;
    mdn_url?: string;
  };
}

interface CSSFunctionsData {
  [functionName: string]: {
    syntax: string;
    groups: string[];
    status: string;
    mdn_url?: string;
  };
}

CSS Data

Localization Data Access

Localization strings for CSS terminology used in MDN Web Docs across multiple languages.

const l10n = {
  css: LocalizationData;
};

interface LocalizationData {
  [termKey: string]: {
    [languageCode: string]: string;
  };
}

Localization Data

Types

interface InheritanceEntry {
  inherits: string | null;
  implements: string[];
}

interface CSSPropertyEntry {
  syntax: string;
  media: string;
  inherited: boolean;
  animationType: string;
  percentages: string;
  groups: string[];
  initial: string;
  appliesto: string;
  computed: string;
  order: string;
  status: string;
  mdn_url?: string;
}

interface CSSFunctionEntry {
  syntax: string;
  groups: string[];
  status: string;
  mdn_url?: string;
}

interface CSSSelectorEntry {
  syntax: string;
  groups: string[];
  status: string;
  mdn_url?: string;
}

interface CSSTypeEntry {
  syntax: string;
  groups: string[];
  status: string;
  mdn_url?: string;
}

interface CSSUnitEntry {
  groups: string[];
  status: string;
  mdn_url?: string;
}

interface CSSSyntaxEntry {
  syntax: string;
  groups: string[];
  status: string;
  mdn_url?: string;
}

interface CSSAtRuleEntry {
  syntax: string;
  interfaces?: string[];
  groups: string[];
  descriptors?: {
    [descriptorName: string]: {
      syntax: string;
      media: string;
      percentages: string;
      computed: string;
      order: string;
      status: string;
      mdn_url?: string;
    };
  };
  status: string;
  mdn_url?: string;
}

interface LocalizationEntry {
  [languageCode: string]: string;
}