Querying Baseline data through the Web Platform Dashboard

Baseline, defined by the WebDX Community Group, is a framework for identifying web platform features that work consistently across major browser engines. To make practical use of Baseline, you need a way to look up which features qualify. The Web Platform Dashboard, backed by the web-features npm package, provides a search interface as well as an HTTP API for programmatic access to that data.

Search grammar for Baseline queries

The dashboard's query grammar is flexible enough to cover most filtering needs. As you type in the search box, suggested query parameters appear. While the full grammar is documented, the following parameters are the most relevant for working with Baseline data:

  • baseline_status: Filters by the enumerated values limited (no Baseline status reached), newly (Baseline Newly available), or widely (Baseline for at least 30 months).
  • baseline_date: Specifies a range using the YYYY-MM-DD..YYYY-MM-DD format. For instance, 2024-01-01..2025-01-01 matches features that reached Baseline within that year.
  • id: The feature identifier, as defined in the web-features package. For example, the entry for Promise.try() uses the ID promise-try.
  • group: An enumerated group name to narrow results to a subset of the platform, such as css.

The dashboard front end sits on top of an HTTP API. For example, this endpoint returns all features that are Baseline Newly available:

https://api.webstatus.dev/v1/features?q=baseline_status:newly

Structure of the JSON response

Every API response has a consistent shape. At the top level, a data property holds an array of matching features. The fields most relevant to Baseline include:

  • baseline: Contains Baseline information for a feature, with these subfields:
    • status: One of limited, newly, or widely. When the status is limited, this is the only subfield present.
    • low_date: The date the feature became Baseline Newly available. Present only when status is newly or widely.
    • high_date: The date the feature became Baseline Widely available. Present only when status is widely.
  • feature_id: The feature's ID, such as "grid" for CSS grid.
  • name: The human-readable feature name, which often differs from the ID. For instance, the ID for Promise.try() is "promise-try" while the name is "Promise.try()".
  • spec: Contains a links subfield that is an array of specification and resource URLs.

Responses also include other fields with data on browser implementation versions, Web Platform Tests, and additional metadata.

Practical query examples

The following examples show how to use the HTTP API in scripts for specific use cases.

Query a single feature

To get data for one feature, filter by its ID. This example fetches support information for CSS grid, which is Baseline Widely available:

// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');

// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;

// Fetch the resource:
const response = await fetch(url);

if (response.ok) {
  // Convert the response to JSON:
  const { data } = await response.json();

  // Log data for each feature to the:
  console.log(data);
}

This kind of lookup can power tooling that warns users when a feature they are using lacks broad cross-browser support.

Fetch all Newly and Widely available features

The API limits query results to 100 features per request. To retrieve all Baseline Newly and Widely available features in a paginated manner, start with a query that excludes those with limited status:

const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

To handle larger result sets, inspect the top-level metadata field, which may contain two subfields:

  • next_page_token: A token to pass in the query string of a subsequent GET request to fetch the next batch. This field is absent when fewer than 100 results are returned or when the end of the result set is reached.
  • total: An integer giving the total count of features matching the query.

With these fields, you can loop through all pages of results:

async function queryWebStatusDashboard (query, token) {
  const urlBase = 'https://api.webstatus.dev/v1/features?q=';
  let queryUrl = `${urlBase}${encodeURIComponent(query)}`;

  if (token) {
    queryUrl += `&page_token=${encodeURIComponent(token)}`;
  }

  const response = await fetch(queryUrl);

  if (response.ok) {
    const { data, metadata } = await response.json();

    console.log(data);

    // See if there's a page token in this query:
    if ('next_page_token' in metadata) {
      const { next_page_token } = metadata;
      queryWebStatusDashboard(query, next_page_token);
    } else {
      console.log('All results collected');
    }
  }
}

// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');

Combine filters for group-specific queries

To find all CSS features that are Baseline Newly available, combine the group parameter with the AND operator:

const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

To broaden the scope to include features that are Baseline Widely available, use the negation operator: -baseline_status:limited AND group:css.

You can also filter by the snapshot field, which groups ECMAScript features by release. The following query covers Baseline Newly available features in the ecmascript-2023 snapshot:

const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

Query features by Baseline date

The baseline_date parameter accepts a start and end date separated by ... This example finds CSS features that became Baseline Widely available at any point in 2022:

const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

These query patterns give you a starting point for integrating Baseline data into your own tooling. With the available parameters, you can build scripts that track feature availability over time and make informed decisions about which web platform capabilities are safe to adopt without fallbacks.