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

# Token Insertion

> Insert design tokens at the cursor with language-aware formatting across CSS, JS, TS, JSON, Vue, Svelte, Astro, and more.

## How insertion works

When you click a token in the sidebar, Design Tokens Explorer inserts it at the cursor position in the active editor. The inserted text is automatically formatted based on the **language of the file** and the **context around the cursor**.

If no editor is active, the formatted value is copied to the clipboard instead.

## Language-aware formatting

The extension detects the active file's language ID and formats the token accordingly:

| Context                                  | Inserted value      | Example                |
| ---------------------------------------- | ------------------- | ---------------------- |
| CSS, SCSS, Less                          | `var(--token-name)` | `var(--color-primary)` |
| CSS-in-JS (JSX, TSX, Vue, Svelte, Astro) | `var(--token-name)` | `var(--color-primary)` |
| JavaScript, TypeScript                   | `'token-name'`      | `'color-primary'`      |
| JSON / JSONC                             | `"token-name"`      | `"color-primary"`      |
| Other                                    | raw token name      | `color-primary`        |

### Cursor context detection

The formatter also inspects the characters around the cursor to avoid double-quoting:

* If the cursor is already **inside a string** in JS/TS, the token name is inserted as a raw value (no quotes added).
* If the cursor is already **inside a `var(` expression** in CSS, only the token name with `--` is inserted.

## Custom CSS insert format

The default CSS insertion format is `var(--{name})`. You can override this with the [`cssInsertFormat`](/docs/configuration/settings#designtokensexplorer-cssinsertformat) setting:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.cssInsertFormat": "var(--{name})"
```

Use `{name}` as the placeholder. The format applies to all CSS-family languages and CSS-in-JS contexts.

**Examples for custom setups:**

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
// PostCSS tokens plugin
"designTokensExplorer.cssInsertFormat": "token(--{name})"

// Sass with variable forwarding
"designTokensExplorer.cssInsertFormat": "$token-{name}"
```

## Click behavior

By default, clicking a token **inserts** it at the cursor. You can change this to always copy instead:

```json settings.json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
"designTokensExplorer.tokenClickAction": "copy"
```

**Shift+click** always copies to clipboard, regardless of the `tokenClickAction` setting. This lets you grab a token value without disturbing the cursor position.

## Command palette

You can also invoke insertion via the Command Palette:

* **Design Tokens: Search** (`Ctrl+Shift+P` → `Design Tokens: Search`) — opens a QuickPick search over all loaded tokens. Selecting an entry inserts or copies it using the same formatting logic.

## Inserting in different file types

### CSS / SCSS / Less

In stylesheet files, tokens are inserted as `var(--token-name)` (or your custom format):

```css theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
.button {
  background-color: var(--color-primary); /* ← inserted */
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
}
```

### JavaScript / TypeScript

In script files, tokens are inserted as quoted strings:

```ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
const styles = {
  color: 'color-primary', // ← inserted
  padding: 'space-3',
};
```

If the cursor is inside an existing string, the token name is inserted without quotes:

```ts theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
const color = `var(--color-primary)`; // cursor inside template literal → no extra quotes
```

### JSX / TSX inline styles

CSS-in-JS contexts (JSX/TSX with inline `style` props, Vue `<style>`, Svelte `<style>`, Astro `<style>`) are treated as CSS and receive `var(--token-name)`:

```tsx theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
<div style={{ color: 'var(--color-primary)' }} />
```

### JSON

In JSON files, tokens are inserted as JSON strings:

```json theme={"theme":{"light":"material-theme-ocean","dark":"material-theme-ocean"}}
{
  "color": "color-primary"
}
```