Skip to content
staticview

Editor Support

The package ships editor metadata for all components: autocomplete for tags and attributes, hover documentation, and richer tooling integration. No generation step is required; the files are included in the npm package.

Note

These are alternative routes to the same features. Set up the one that fits your editor and workflow.

Quick reference:

  • VS Code: html.customData setting, or the Web Components Language Server extension.
  • Neovim: HTML language server customData, or the wc-toolkit plugin.
  • Zed: Web Components Language Server extension.
  • JetBrains IDEs: automatic, web-types.json is picked up with no configuration.

VS Code

custom.html-data.json

Register it in your workspace settings:

.vscode/settings.json
{
  "html.customData": ["./node_modules/@staticview/ui/custom.html-data.json"],
}

This covers .html files only. For framework files (JSX/TSX, Vue, Svelte), use the language server below instead.

custom-elements.json

Install the Web Components Language Server extension from the VS Code Marketplace. It automatically detects custom-elements.json in your dependencies with no extra configuration needed. Also works in VSCodium, Cursor, Windsurf, and Theia.

Neovim

custom.html-data.json

Pass it to the HTML language server via your LSP config:

require('lspconfig').html.setup {
  settings = {
    html = {
      customData = { vim.fn.getcwd() .. '/node_modules/@staticview/ui/custom.html-data.json' }
    }
  }
}

custom-elements.json

Install the wc-toolkit Neovim plugin. The language server executable can be installed via Mason:

:MasonInstall wc-language-server

Then set up the plugin:

require("wc_language_server").setup()

It auto-detects custom-elements.json from your project dependencies and attaches to HTML, Astro, Vue, Svelte, JSX/TSX, and Markdown files.

Zed

Install the Web Components Language Server extension from Zed’s extension marketplace. It auto-detects custom-elements.json from your dependencies.

custom.html-data.json

Caution

The Zed HTML extension does not support customData in settings.json yet, so this method currently has no effect in Zed; use the extension above instead. Once support lands, the registration will look like this:

.zed/settings.json
{
  "lsp": {
    "vscode-html-language-server": {
      "settings": {
        "html": {
          "customData": ["./node_modules/@staticview/ui/custom.html-data.json"],
        },
      },
    },
  },
}

JetBrains IDEs

web-types.json

JetBrains IDEs (WebStorm, IntelliJ IDEA, Rider, etc.) pick up the package’s web-types.json automatically, with no configuration required.

custom-elements.json

Install the Web Components Language Server JetBrains plugin. It reads custom-elements.json directly from your dependencies.

Note

JetBrains IDEs do not support custom.html-data.json.