> ## Documentation Index
> Fetch the complete documentation index at: https://dtexplorer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install and configure Design Tokens Explorer in under 5 minutes.

<Steps>
  <Step title="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](https://www.dtexplorer.io/#pricing).
  </Step>

  <Step title="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`:

    <Tabs>
      <Tab title="CSS/SCSS file">
        ```jsonc theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "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`:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        :root {
          --color-primary: #7C3AED;
          --color-neutral-100: #f5f5f5;
          --space-4: 1rem;
          --radius-md: 0.5rem;
        }
        ```

        `:where(html)` is also supported:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        :where(html) {
          --color-primary: #7C3AED;
          --space-4: 1rem;
        }
        ```

        You can also use a Tailwind-style `@theme` block:

        ```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        @theme {
          --color-primary: #7C3AED;
          --space-4: 1rem;
          --radius-md: 0.5rem;
        }
        ```
      </Tab>

      <Tab title="JSON file">
        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "designTokensExplorer.sources": [
          {
            "name": "Design System",
            "path": "./tokens/tokens.json",
            "groups": [
              { "name": "color", "type": "color" },
              { "name": "fontSize", "type": "font-size" }
            ]
          }
        ]
        ```

        Your JSON file can be flat or nested:

        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        {
          "color": {
            "primary": "#7C3AED",
            "neutral": {
              "100": "#f5f5f5"
            }
          },
          "fontSize": {
            "sm": "0.875rem",
            "base": "1rem"
          }
        }
        ```
      </Tab>

      <Tab title="Remote URL">
        ```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
        "designTokensExplorer.sources": [
          {
            "name": "Remote Tokens",
            "path": "https://tokens.example.com/brand.css",
            "groups": [
              { "name": "color", "type": "color" }
            ]
          }
        ]
        ```

        Remote sources are fetched on activation and reloaded when you run **Refresh Sources**.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Open the panel">
    Click the **Design Tokens Explorer** icon in the Activity Bar (left sidebar). Your tokens will load automatically.

    <Note>
      If you don't see the icon, open the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`) and run **Design Tokens: Refresh Sources**.
    </Note>
  </Step>

  <Step title="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](/docs/features/token-insertion) for full formatting rules.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Token Sources" icon="folder-open" href="/docs/configuration/sources">
    Detailed source configuration including groups and remote URLs
  </Card>

  <Card title="All Settings" icon="gear" href="/docs/configuration/settings">
    Customize insertion format, click behavior, scan paths, and more
  </Card>

  <Card title="Token Previews" icon="eye" href="/docs/features/token-preview">
    Visual preview renderers for every token type
  </Card>

  <Card title="Adoption Audit" icon="magnifying-glass" href="/docs/features/adoption-audit">
    Find and replace hardcoded values across your codebase
  </Card>
</CardGroup>