Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Astro HTMX IntellisenseNew to Visual Studio Code? Get it now.
Astro HTMX Intellisense

Astro HTMX Intellisense

Alec269

|
1 install
| (0) | Free
Adds full HTMX IntelliSense and hover docs to Astro and HTML files in VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🌌 Astro HTMX IntelliSense

Astro HTMX IntelliSense brings full HTMX attribute autocompletion, hover documentation, and inline tooltips to your Astro and HTML files — making it easier than ever to build reactive Astro components with HTMX.


🚀 Features

✅ Autocomplete for all hx-* attributes Start typing hx- to instantly get suggestions for attributes like hx-get, hx-post, hx-trigger, and more.

✅ Attribute value suggestions Get smart, context-aware completions for specific attributes:

  • hx-swap → innerHTML, outerHTML, beforebegin, etc.
  • hx-trigger → click, change, submit, etc.
  • hx-ext → json-enc, morph, debug, etc.

⚠️ Note: Due to limitations in Astro’s LSP, value autocompletion isn’t currently supported in .astro files — only in .html files. However, as of October 2025, this is the only extension offering any level of HTMX IntelliSense inside Astro files.

✅ Inline documentation Hover over any HTMX attribute to see concise documentation — right in your editor.

✅ Astro + HTML support Works seamlessly in both standard .html files and embedded HTML within .astro templates.


🧠 Example

Here’s how IntelliSense looks in action:

<input
  hx-get="/api/search"
  hx-trigger="keyup changed delay:500ms"
  hx-target="#results"
  hx-swap="innerHTML"
/>
  • Typing hx- suggests all available HTMX attributes.
  • Typing inside quotes (" ") provides contextual value suggestions (HTML only).
  • Hovering over any hx-* attribute displays inline documentation.

⚙️ Requirements

  • Visual Studio Code v1.104.0 or later
  • Works out of the box — no setup required
  • Install the official Astro VS Code extension for best results

🔧 Extension Settings

No settings required — IntelliSense activates automatically in supported file types.


🧩 Supported Attributes

All core HTMX attributes are supported, including:

hx-get, hx-post, hx-put, hx-delete, hx-patch, hx-trigger, hx-target, hx-swap, hx-sync, hx-include, hx-vals, hx-headers, hx-params, hx-ext, and more.

Defined via VS Code’s Language Server API:

"contributes": {
  "html": {
    "attributes": [...],
    "attributeValues": [...]
  }
}

⚠️ Known Issues

  • Attribute value autocomplete only works in .html files. (In .astro files, only attribute name autocomplete is supported.)

If you discover missing attributes or unexpected behavior, please open an issue on the GitHub repository.


🗓️ Release Notes

v1.0.0

  • Initial release
  • Added all core hx-* attributes
  • Added contextual value completions (hx-swap, hx-trigger, hx-ext)
  • Added hover documentation for all attributes

💡 Roadmap

  • Enable attribute value autocomplete in .astro files
  • Improve documentation tooltips with examples
  • Add support for HTMX extensions and custom attributes

📚 References

  • HTMX Official Docs
  • Astro Framework
  • Language Server API

✨ Enjoy fast, intelligent, and context-aware HTMX autocompletion — right inside your Astro projects!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft