Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.dtexplorer.io/llms.txt

Use this file to discover all available pages before exploring further.

1

Install the extension

  1. Open VS Code.
  2. Open the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for Design Tokens Explorer.
  4. Click Install.
The 7-day free trial starts automatically on first activation. You can buy a license here.
2

Add your first token source

Open your VS Code settings (Ctrl+, / Cmd+,) and search for designTokensExplorer.sources, or add it manually to your settings.json:
"designTokensExplorer.sources": [
  {
    "name": "Brand Tokens",
    "path": "./tokens/brand.css",
    "groups": [
	  // the name must match tokens prefix (color, space, radius...)
      { "name": "color", "type": "color" },
      { "name": "space", "type": "size" },
      { "name": "radius", "type": "radius" }
    ]
  }
]
Your CSS file should expose tokens as CSS custom properties inside :root, :where(html), or @theme:
:root {
  --color-primary: #7C3AED;
  --color-neutral-100: #f5f5f5;
  --space-4: 1rem;
  --radius-md: 0.5rem;
}
:where(html) is also supported:
:where(html) {
  --color-primary: #7C3AED;
  --space-4: 1rem;
}
You can also use a Tailwind-style @theme block:
@theme {
  --color-primary: #7C3AED;
  --space-4: 1rem;
  --radius-md: 0.5rem;
}
3

Open the panel

Click the Design Tokens Explorer icon in the Activity Bar (left sidebar). Your tokens will load automatically.
If you don’t see the icon, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and run Design Tokens: Refresh Sources.
4

Insert a token

  1. Open any file in the editor
  2. Place the cursor where you want to insert a token
  3. Click a token in the sidebar — it inserts automatically in the correct format
For CSS files this produces var(--token-name). In JavaScript/TypeScript it inserts the token name as a string. See Token Insertion for full formatting rules.
5

Audit hardcoded values

Open the DTE Hardcoded Values panel from the bottom panel area (or via the Command Palette: Design Tokens: Open Hardcoded Values Audit). The panel scans your workspace and lists every hardcoded value that has a matching token, so you can replace them one by one.

​
Next steps

Token Sources

Detailed source configuration including groups and remote URLs

All Settings

Customize insertion format, click behavior, scan paths, and more

Token Previews

Visual preview renderers for every token type

Adoption Audit

Find and replace hardcoded values across your codebase