Svelte | Zed Code Editor Documentation
Description: Learn how to use and customize Zed, the fast, collaborative code editor. Official docs on features, configuration, AI tools, and workflows.

# Svelte

Svelte support is available through the Svelte extension.

- Tree-sitter: tree-sitter-grammars/tree-sitter-svelte
- Language Server: sveltejs/language-tools

## Extra theme styling configuration

You can modify how certain styles, such as directives and modifiers, appear in attributes:

    "syntax": {
      // Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
      "attribute.function": {
        "color": "#ff0000"
      },
      // Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
      "attribute.special": {
        "color": "#00ff00"
      }
    }

## Inlay Hints

When inlay hints is enabled in Zed, to make the language server send them back, Zed sets the following initialization options:

    "inlayHints": {
      "parameterNames": {
        "enabled": "all",
        "suppressWhenArgumentMatchesName": false
      },
      "parameterTypes": {
        "enabled": true
      },
      "variableTypes": {
        "enabled": true,
        "suppressWhenTypeMatchesName": false
      },
      "propertyDeclarationTypes": {
        "enabled": true
      },
      "functionLikeReturnTypes": {
        "enabled": true
      },
      "enumMemberValues": {
        "enabled": true
      }
    }

To override these settings, use the following:

    "lsp": {
      "svelte-language-server": {
        "initialization_options": {
          "configuration": {
            "typescript": {
              ......
            },
            "javascript": {
              ......
            }
          }
        }
      }
    }

See the TypeScript language server `package.json` for more information.