Design Tokens Explorer

DESIGN TOKENS MADE EASY.
dtexplorer.io

Design Tokens Explorer is a premium VS Code extension that lets you load, browse, preview, and insert design tokens directly in your editor — from local files or remote URLs. It supports CSS custom properties, JSON, and JS/TS exports, with live visual previews for colors, spacing, typography, shadows, easing curves, and more.

Quick Start

Add your token sources to .vscode/settings.json:

{
  "designTokensExplorer.sources": [
    {
      "name": "Tokens",
      // relative path or remote URL (.css, .json, .js)
      "path": "tokens/tokens.css",
      "groups": [
        // the name must match tokens prefix (color, space, radius...)
        { "name": "color", "type": "color" },
        { "name": "spacing", "type": "size" },
        { "name": "radius", "type": "radius" },
      ],
    },
  ],
}

Click any token in the sidebar to insert it at the cursor. That's it.

For the full configuration reference, token source formats, usage scanning, and all available options, see the documentation →

Design Tokens Explorer is a Vira Software's commercial product developed by Mattia Astorino.
By using this extension you agree with the Terms of Service published on dtexplorer.io