This section will focus on how to query your design tokens from your codebase. DesignHub provides a powerful REST API that allows you to query your design system releases and even your draft design tokens.



Getting started



Navigate to a design system in the DesignHub platform and on the left hand sidebar click the "Distribution" button. This will present you with the url needed to query your design tokens, as well as a place to create a token to authenticate with.



Here's an example of how to query your design tokens in Javascript:



await fetch(
  "https://api.designhub.io/design_systems/${designSystemId}/tokens",
  {
    headers: {
      "Authorization": "Bearer {apiKey}",
      "DesignHub-Version": "2024-11-03",
    },
  },
);



The `v` query parameter



The v query parameter is used to specify the version of the design tokens you want to query. Please note that all design system releases have a semantic version number. This is the version number that you should use in the v query parameter.



You can also set the query parameter to draft to get the design tokens that are being edited in realtime. This is useful for staging applications where you want the latest token values, as they're being edited.



Lastly, note that you can set the v query parameter to be a semantic version range, such as "2". This is useful if you want automatic updates without having to manually update the version number or redeploy your application.



Setting the `DesignHub-Version` header



The DesignHub-Version header is used to specify the version of the REST API you want to use. We recommend setting this to the current date in the format YYYY-MM-DD. This ensures that your integration won't break when we release a new version of the REST API.