# Design Tokens Explorer

## Docs

- [Settings Reference](https://docs.dtexplorer.io/docs/configuration/settings.md): Complete reference for all Design Tokens Explorer settings.
- [Token Sources](https://docs.dtexplorer.io/docs/configuration/sources.md): Configure where Design Tokens Explorer loads your tokens from — local files, remote URLs, and multiple sources.
- [Adoption Audit](https://docs.dtexplorer.io/docs/features/adoption-audit.md): Find hardcoded values in your codebase that should be replaced with design tokens — and fix them in one click.
- [Autocomplete](https://docs.dtexplorer.io/docs/features/autocomplete.md): Get design token autocomplete suggestions as you type in CSS, SCSS, Less, and CSS-in-JS files.
- [Token Insertion](https://docs.dtexplorer.io/docs/features/token-insertion.md): Insert design tokens at the cursor with language-aware formatting across CSS, JS, TS, JSON, Vue, Svelte, Astro, and more.
- [Token Previews](https://docs.dtexplorer.io/docs/features/token-preview.md): Visual preview renderers for every token type — colors, spacing, typography, shadows, easing curves, and more.
- [Multiple Sources](https://docs.dtexplorer.io/docs/guides/multiple-sources.md): Load tokens from multiple files or remote URLs simultaneously — useful for multi-package design systems, theming, and component library setups.
- [Token File Formats](https://docs.dtexplorer.io/docs/guides/token-formats.md): Detailed guide to CSS, SCSS, JSON, and JavaScript/TypeScript token file formats — syntax, examples, and parsing rules.
- [Introduction](https://docs.dtexplorer.io/docs/introduction.md): Load, explore, preview, check adoption, and insert design tokens directly in VS Code.
- [Quickstart](https://docs.dtexplorer.io/docs/quickstart.md): Install and configure Design Tokens Explorer in under 5 minutes.

## OpenAPI Specs

- [openapi](https://docs.dtexplorer.io/api-reference/openapi.json)

## Optional

- [Website](https://dtexplorer.io)
- [Try for free](vscode:extension/vira.design-tokens-explorer)