Language Preview—DTL is currently in alpha. Explore the language, try the playground, and learn how to use it.Alpha release coming soon.
VS Code Extension

VS Code Extension

Full language support for DTL in VS Code. Get syntax highlighting, autocomplete, diagnostics, and all the IDE features you expect.

Features

Syntax Highlighting

Colorful highlighting for all DTL constructs including keywords, types, tokens, and values.

IntelliSense

Smart autocomplete for keywords, types, token names, and built-in functions with context-aware suggestions.

Diagnostics

Real-time error checking with inline markers and detailed error messages in the Problems panel.

Hover Information

View token details, types, and documentation by hovering over any token reference or definition.

Go to Definition

Jump directly to token definitions with F12 orCtrl+Click.

Find References

Find all usages of a token across your project with Shift+F12.

Alpha Release Coming Soon

The VS Code extension is currently in development and will be available in the VS Code marketplace during the alpha release. In the meantime, you can try DTL in the web playground with full language features.

Try PlaygroundLearn Syntax

Installation (Coming Soon)

Install from the VS Code marketplace or from a .vsix file:

From VS Code Marketplace

Open Extensions view (Ctrl+Shift+X)
Search for "DTL" or "Design Token Language"
Click Install

From .vsix File

Install from .vsix

Usage

Once installed, the extension automatically activates when you open any.tokens or.tokens file.

Keyboard Shortcuts

Trigger autocompleteCtrl+Space
Go to definitionF12
Find referencesShift+F12
Show hover infoHover

Related Tools

CLI Tool

Compile and validate DTL files from the command line.

Playground

Try DTL in your browser without any installation.