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.

AI Assistants

The documentation site serves two files following the llms.txt convention:

  • llms.txt: an index linking every guide, package README, component reference, and example as Markdown.
  • llms-full.txt: the guides, READMEs, and component references inlined into a single file. Examples are left out; follow the index for those.

Use the index with tools that can fetch links on demand, and the full file with tools that index a single URL or when pasting everything into one prompt.

Cursor

Settings → Features → Docs → Add new doc, then paste the llms.txt URL. Once indexed, reference it in chat with @Staticview.

Claude Code, Codex, and similar

These read the repository's instructions file, so a line pointing at llms-full.txt is enough, together with an instruction to fetch it before answering questions about sv-* components.