Tool · editor workflow

Design System
Language Server.

Bring the components, tokens, and utility classes your team already publishes into the editor.

Local-first and editor-agnostic, the server reads existing manifests or discovers them from installed packages. It does not ask you to adopt a new all-in-one format.

Install for VS Code ↗ View source on GitHub ↗

Changelog

Features

The Language Server gives feedback in the context where it matters: while you are writing code.

VS Code suggesting the design token --acme-spacing-lg in a CSS var() expression. — **Token completion.** Discover available tokens as you write CSS.

VS Code hover explaining that a deprecated CSS token should be replaced with a new token. — **Token migration guidance.** See why a token is being removed and what replaces it.

VS Code hover explaining that the tertiary variant attribute value is deprecated in favour of secondary. — **Attribute migration guidance.** Find an element’s valid values and the recommended replacement.

VS Code hover showing the status, package, slots, and attributes of the acme-button custom element. — **Component details.** Inspect an element’s API without leaving the editor.

One server, three sources

Use the data you already publish

The Language Server combines these three familiar sources into one editor experience—without asking a team to move its data into a new format.

Components

Custom Elements Manifest

Tokens

Token document

Utilities

Utility manifest

package.json · published package metadata

{
  "customElements": "dist/custom-elements.json",
  "designSystem": {
    "tokens": "dist/tokens.json",
    "utilities": "dist/utilities.manifest.json"
  }
}

One local process