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

# Autocomplete

> Get design token autocomplete suggestions as you type in CSS, SCSS, Less, and CSS-in-JS files.

## Overview

Design Tokens Explorer provides IntelliSense autocomplete for all loaded tokens in CSS-family files. As you type a `var(--` expression, a list of matching tokens appears with their values shown inline — no need to switch to the sidebar.

## Supported languages

Autocomplete is active in the following languages:

* CSS
* SCSS
* Less
* JavaScript / TypeScript with CSS-in-JS patterns
* JSX / TSX
* Vue (inside `<style>` blocks)
* Svelte (inside `<style>` blocks)
* Astro (inside `<style>` blocks)

## Trigger characters

Autocomplete triggers on `-` and `(` characters. The completion provider activates on three patterns:

### 1. `var(--` with a partial name

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
color: var(--color-|
```

Suggests all tokens whose name matches the typed prefix. Each suggestion inserts the full `var(--token-name)` expression.

### 2. `var(` with nothing after

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
color: var(|
```

Suggests all loaded tokens. Each suggestion inserts `--token-name)` to complete the expression.

### 3. Standalone `--` prefix

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
--color-|
```

Suggests all tokens matching the prefix. Each suggestion inserts the full `var(--token-name)` expression.

## What shows in the completion list

Each completion item shows:

* **Token name** as the primary label
* **Raw value** as the detail (shown to the right in most editor themes)
* Completion kind: `Variable`

## Keeping suggestions fast

Suggestions are drawn from the in-memory token registry — no file I/O happens during completion. All loaded tokens are available immediately.

## Loading tokens for autocomplete

Autocomplete only surfaces tokens that are already loaded. Make sure your sources are configured and the panel has loaded successfully. If tokens are missing from suggestions, run:

```
Design Tokens: Refresh Sources
```

See [Token Sources](/docs/configuration/sources) for configuration details.