HTML | 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.

# HTML

HTML support is available through the HTML extension.

- Tree-sitter: tree-sitter/tree-sitter-html
- Language Server: microsoft/vscode-html-languageservice

This extension is automatically installed, but if you do not want to use it, you can add the following to your settings:

    {
      "auto_install_extensions": {
        "html": false
      }
    }

## Formatting

By default Zed uses Prettier for formatting HTML.

You can disable `format_on_save` by adding the following to your Zed `settings.json`:

      "languages": {
        "HTML": {
          "format_on_save": "off",
        }
      }

You can still trigger formatting manually with `cmd-shift-i|ctrl-shift-i` or by opening the Command Palette (`cmd-shift-p|ctrl-shift-p`) and selecting "Format Document".

### LSP Formatting

To use the `vscode-html-language-server` language server auto-formatting instead of Prettier, add the following to your Zed settings:

      "languages": {
        "HTML": {
          "formatter": "language_server",
        }
      }

You can customize various formatting options for `vscode-html-language-server` via your Zed `settings.json`:

      "lsp": {
        "vscode-html-language-server": {
          "settings": {
            "html": {
              "format": {
                // Indent under <html> and <head> (default: false)
                "indentInnerHtml": true,
                // Disable formatting inside <svg> or <script>
                "contentUnformatted": "svg,script",
                // Add an extra newline before <div> and <p>
                "extraLiners": "div,p"
              }
            }
          }
        }
      }

## See also

- CSS
- JavaScript
- TypeScript