> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Configuring Token Engine

## Overview

You can configure the Knapsack Token Engine by using the `knapsack.config.js` file located in the knapsack folder. This configuration file allows you to specify the source location of design tokens, the output format location, and select which output formats to include. It gives you the flexibility to define how design tokens are processed and where they are stored.

### Configuration

#### distDir

The `distDir` property specifies the directory where the output of the design tokens will be generated. By default, the design token output is placed in the tokens directory within the dist directory of the knapsack folder.

#### srcFilePath

The `srcFilePath` property points to the file that contains the design tokens data. By default, the design tokens are sourced from the `knapsack.design-tokens.json` file in the data directory of the knapsack folder.

#### targets

The `targets` property allows you to enable or disable specific targets for generating design tokens. Available targets include android, css, ios, and js.

#### filterTokens

The `filterTokens` functionality lets you selectively include or exclude specific tokens based on defined criteria.

Here's an example code snippet that demonstrates configuring these properties and functionality:

```js
const DesignTokensJson = join(__dirname, './packages/design-tokens/design-tokens.json');
const DesignTokenDist = join(__dirname, './packages/design-tokens/dist');

module.exports = configureKnapsack({
  designTokens: {
    distDir: DesignTokenDist,
    srcFilePath: DesignTokensJson,
    targets: {
      android: {
        enabled: true,
        filterTokens: (token) => {
          // how to filter tokens
          return token.id.startsWith('breakpoint');
        },
      },
      css: { enabled: true },
      ios: { enabled: true },
      js: { enabled: true },
    },
  },
  ...
});
```

### Supported Outputs

The Knapsack Platform supports several output formats for exporting design tokens:

#### Web

* CommonJS (`.cjs`)
* Cascading Style Sheets (`.css`)
* TypeScript Declaration File (`.d.ts`)
* JavaScript Module (`.js`)
* JSON (`.json`)
* Less CSS (`.less`)
* Nested JSON (`.nested.json`)
* Sass/SCSS (`.scss`)
* Style Dictionary (`.style-dictionary`)

#### Native

* Android XML Resource Files (`android.xml`)
* Swift Programming Language (`.swift`)

These output formats provide flexibility and compatibility for integrating design tokens into various development environments and platforms.

The Knapsack Token Engine provides a powerful and user-friendly way to work with design tokens, enabling efficient collaboration between designers and developers while ensuring consistency across platforms and workflows.

***

## Extra Token Asset Builds

If more than one set of tokens are needed to be built from multiple token source JSON files, there is an extra CLI tool for doing so:

```bash
$ ./node_modules/.bin/knapsack-build-tokens --help

Options:
  --help        Show help                                              [boolean]
  --version     Show version number                                    [boolean]
  --src         Path to the design tokens JSON file          [string] [required]
  --dist        Path to the directory where the files will be written
                                                             [string] [required]
  --clean       Delete the dist directory before writing files
                                                      [boolean] [default: false]
  --src-format
      [string] [choices: "knapsack", "w3c", "tokens-studio", "style-dictionary"]
                                                           [default: "knapsack"]
  --verbose     Show verbose output                   [boolean] [default: false]
```

### Example usage

```bash
npx knapsack-build-tokens --src ./src/tokens/tokens.json --dist ./dist/assets --src-format tokens-studio --config ./knapsack/knapsack.config.json
```

Assume the following values:

* `srcTokenFilePath`: `"./src/tokens/tokens.json"`
* `assetsFolder`: `"./dist/assets"`
* `knapsackConfigPath`: `"./knapsack/knapsack.config.json"`