Data Structure

/**
 * Main browser compatibility data object containing all compatibility information
 * organized by technology category
 */
const bcd: CompatData;

interface CompatData {
  /** Package metadata including version and build timestamp */
  __meta: {
    version: string;
    timestamp: string;
  };
  /** Web API interfaces, methods, properties, and events */
  api: { [key: string]: Identifier };
  /** Browser information, releases, and engine data */
  browsers: { [key: string]: BrowserStatement };
  /** CSS properties, selectors, at-rules, and functions */
  css: { [key: string]: Identifier };
  /** HTML elements, attributes, and global attributes */
  html: { [key: string]: Identifier };
  /** HTTP headers, status codes, methods, and features */
  http: { [key: string]: Identifier };
  /** JavaScript language features and built-in objects */
  javascript: { [key: string]: Identifier };
  /** Web App Manifest properties and PWA features */
  manifests: { [key: string]: Identifier };
  /** MathML elements and attributes */
  mathml: { [key: string]: Identifier };
  /** SVG elements, attributes, and features */
  svg: { [key: string]: Identifier };
  /** WebAssembly instructions, types, and features */
  webassembly: { [key: string]: Identifier };
  /** WebDriver automation commands and capabilities */
  webdriver: { [key: string]: Identifier };
  /** Browser extension APIs across different browsers */
  webextensions: { [key: string]: Identifier };
}

import bcd from '@mdn/browser-compat-data';

// Access package metadata
console.log(bcd.__meta.version); // "7.1.2"

// Access CSS flexbox support
const flexbox = bcd.css.properties.display.__compat.support;
console.log(flexbox.chrome.version_added); // "29"

// Check if a feature is experimental
const isExperimental = bcd.api.CSSMarginRule.__compat.status.experimental;
console.log(isExperimental); // true

/**
 * Represents a feature tree node that may contain sub-features and compatibility data
 */
interface Identifier {
  /** Compatibility statement for this feature */
  __compat?: CompatStatement;
  /** Sub-features or related properties */
  [key: string]: Identifier | CompatStatement | undefined;
}

/**
 * Describes a browser including its releases, engine information, and capabilities
 */
interface BrowserStatement {
  /** Human-readable browser name */
  name: string;
  /** Browser type classification */
  type?: BrowserType;
  /** All browser releases with version information */
  releases: { [version: string]: ReleaseStatement };
  /** Whether browser accepts feature flags */
  accepts_flags?: boolean;
  /** Whether browser accepts webextensions */
  accepts_webextensions?: boolean;
  /** Preview browser name for development versions */
  preview_name?: string;
  /** Upstream browser this one is based on */
  upstream?: string;
}

/**
 * Browser type classification
 */
type BrowserType = "desktop" | "mobile" | "xr" | "server";

/**
 * Information about a specific browser release
 */
interface ReleaseStatement {
  /** Release date in YYYY-MM-DD format */
  release_date?: string;
  /** Release notes URL */
  release_notes?: string;
  /** Release status */
  status: "retired" | "current" | "exclusive" | "beta" | "nightly" | "esr" | "planned";
  /** Rendering engine name */
  engine: string;
  /** Engine version for this release */
  engine_version: string;
}

import bcd from '@mdn/browser-compat-data';

// Get Chrome browser information
const chrome = bcd.browsers.chrome;
console.log(chrome.name); // "Chrome"
console.log(chrome.type); // "desktop"

// Check a specific Chrome release
const chrome90 = chrome.releases["90"];
console.log(chrome90.engine); // "Blink"
console.log(chrome90.status); // "retired"

/**
 * Contains support data and metadata for a web platform feature
 */
interface CompatStatement {
  /** Human-readable description of the feature */
  description?: string;
  /** Specification URL(s) for this feature */
  spec_url?: string | string[];
  /** Tags for categorization and web-features integration */
  tags?: string[];
  /** Browser support information */
  support: SupportBlock;
  /** Standardization and implementation status */
  status?: StatusStatement;
  /** Source file path in the repository */
  source_file?: string;
}

/**
 * Browser support information mapping browser names to support statements
 */
type SupportBlock = Partial<Record<BrowserName, SupportStatement>>;

/**
 * Support information for a specific browser (single statement or array)
 */
type SupportStatement = SimpleSupportStatement | SimpleSupportStatement[];

/**
 * Detailed browser support information
 */
interface SimpleSupportStatement {
  /** Version when support was added (string version, true, false, or null) */
  version_added: VersionValue;
  /** Version when support was removed */
  version_removed?: VersionValue;
  /** Required prefix for the feature */
  prefix?: string;
  /** Alternative name the feature was known by */
  alternative_name?: string;
  /** Required flags to enable the feature */
  flags?: FlagStatement[];
  /** Implementation tracking URL */
  impl_url?: string;
  /** Additional notes about support */
  notes?: string | string[];
  /** Whether support is only partial */
  partial_implementation?: boolean;
}

/**
 * Version value - string for specific versions, boolean for general support
 */
type VersionValue = string | boolean | null;

/**
 * Information about feature flags required to enable functionality
 */
interface FlagStatement {
  /** Flag type */
  type: "preference" | "compile_flag" | "runtime_flag";
  /** Flag name */
  name: string;
  /** Value to set for the flag */
  value_to_set?: string;
}

/**
 * Standardization and implementation status
 */
interface StatusStatement {
  /** Whether the feature is experimental */
  experimental?: boolean;
  /** Whether the feature is on the standards track */
  standard_track?: boolean;
  /** Whether the feature is deprecated */
  deprecated?: boolean;
}

import bcd from '@mdn/browser-compat-data';

// Get fetch API compatibility
const fetchCompat = bcd.api.fetch.__compat;

// Check Chrome support
const chromeSupport = fetchCompat.support.chrome;
console.log(chromeSupport.version_added); // "42"

// Check if feature is experimental
console.log(fetchCompat.status?.experimental); // false

// Look for features with flags
const featureWithFlags = bcd.css.properties["container-type"].__compat;
const chromeFlags = featureWithFlags.support.chrome.flags;
if (chromeFlags) {
  console.log(chromeFlags[0].name); // Flag name if present
}