Design Lasagna

Design Lasagna: Design System Language Server

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 Pre-Release for VS Code View source on GitHub

VS Code v0.2.0 · Pre-Release · Minimum VS Code 1.90

Setup documentation · Changelog

See it in action

The extension provides manifest-backed completions, hovers, diagnostics, and migration actions. 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.
More examples: migration guidance and component details
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.

What the language server can do

Features draw on the information in your manifests and the syntax supported by your editor integration.

Component completions

  • Custom-element tags, attributes, and allowed values
  • Named slot suggestions
  • Lit .property and @event bindings

Tokens and CSS

  • Token suggestions in var(), with resolved values
  • Component-scoped CSS custom properties
  • Exposed CSS part names in ::part()

Utility classes

  • Class suggestions and descriptions from utility manifests
  • Configurable class attribute names
  • Static class names in Lit classMap calls

Hover information

  • Component APIs, attributes, values, and slots
  • Token values and utility descriptions
  • Deprecation details and replacement guidance where provided

Diagnostics

  • Deprecation warnings for components, attributes, individual values, tokens, and classes
  • Severity that escalates as removal dates approach
  • Schema validation for discovered token documents, with JSON and JSONC error locations

Migration quick fixes

  • Replace deprecated tokens and utility classes
  • Update deprecated attributes and individual attribute values
  • Apply targeted edits when the manifest supplies a valid replacement

Discover manifests from installed packages or connect local files. Read the setup documentation

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

Design System Language Server

Completions, hovers, diagnostics, and migration actions in the editor.

Get started

Use it in your editor

The VS Code integration activates for web-focused files and connects to the manifests in your workspace.