Skip to main content

​
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:
ContextInserted valueExample
CSS, SCSS, Lessvar(--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"
Otherraw token namecolor-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 setting:
settings.json
"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: 
// 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:
settings.json
"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): 
.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: 
const styles = {
  color: "color-primary", // ← inserted
  padding: "space-3",
};
If the cursor is inside an existing string, the token name is inserted without quotes: 
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): 
<div style={{ color: "var(--color-primary)" }} />

​
JSON

In JSON files, tokens are inserted as JSON strings: 
{
  "color": "color-primary"
}