HTMX Django IntelliSense

Write HTMX faster in VS Code with offline completions, hover documentation, diagnostics, quick fixes, snippets, and Django 6 template partial support.

Install from the Visual Studio Marketplace · Install from Open VSX

Highlights

• Complete hx-* attributes and documented values in HTML and Django templates.
• Get context-aware suggestions for swaps, targets, triggers, encodings, methods, and HTMX 4 modifiers.
• Hover for concise documentation, version availability, and official HTMX links.
• Catch HTMX typos and invalid documented values with one-click quick fixes.
• Complete, navigate, rename, and find references for Django 6 template partials.
• Insert Django-ready GET, CSRF-safe POST, delete, search, infinite-scroll, and partial snippets.
• Work entirely offline: the extension reads its committed catalog and makes no runtime network requests.

Installation

Install HTMX Django IntelliSense from the Visual Studio Marketplace or Open VSX.

Alternatively, install a local VSIX from a checkout:

npm install
npm run package
code --install-extension htmx-django-intellisense-*.vsix --force

If you use VS Code profiles, this installs into the default profile's extension pool. If the extension doesn't show up in the Extensions view, check which profile your workspace uses and reinstall with --profile "<your-profile-name>".

Django template support requires the Django extension, which VS Code installs as an extension dependency. Open an html or django-html template and type hx- to verify activation.

Documentation

Read the full documentation for installation, HTMX authoring, Django partials, configuration, testing, packaging, and release guidance.

• Install and verify the extension
• Create your first HTMX template
• Author HTMX attributes
• Use Django template partials
• Configure completion and compatibility
• Browse snippets

Features

Completions and hover documentation

Type hx- in HTML or Django HTML to see version-aware attributes, aliases, dynamic syntax, and Django-ready snippets.

Values are suggested for the attribute you are editing. hx-swap, hx-trigger, and hx-target provide documented strategies, events, and modifier fragments in context.

Hover a recognized hx-* or data-hx-* attribute for its purpose, supported HTMX versions, suggested values, and official documentation links.

Diagnostics and quick fixes

The extension identifies misspelled HTMX attributes, deprecated attributes, invalid documented values, and unknown Django partials. Each diagnostic includes a quick fix from the Ctrl/Cmd+. lightbulb.

Django template partials

Definitions in the current template are offered after {% partial :

{% partialdef result_card inline %}
  <article id="result-{{ result.pk }}">{{ result.title }}</article>
{% endpartialdef %}

{% partial result_card %}

Go to Definition, Peek Definition, Find All References, and Rename Symbol work with local partials. Static cross-template references also complete and navigate from Django includes and common Python APIs:

{% include "results.html#result_card" %}

return render(request, "results.html#result_card", context)

See the Django partials guide for lookup rules, diagnostics, and cross-template behavior.

Django snippets

Type a snippet prefix in a django-html document to insert a secure, Django-ready HTMX pattern. See the snippet and example catalog for every prefix and its generated output.

Compatibility and settings

The committed catalog covers HTMX 2.0.10 and 4.0.0. compatible mode is the default and accepts their union. Choose 2 or 4 to surface cross-version syntax as hints.

See the configuration guide and settings reference for details.

Contributing

This repository contains the TypeScript VS Code extension and a Python toolchain under tools/ that generates the offline HTMX catalog and snippets.

Set up both toolchains with uv and npm:

just init

Run the complete local verification checklist:

just verify

Useful focused commands:

npm test
npm run test:extension
npm run package

After changing catalog inputs or snippet sources, regenerate the committed artifacts with npm run build-data or npm run build-snippets. See the first contribution guide and CI and packaging guide for the full workflow.

License

Licensed under Apache 2.0. Maintained independently at difegam/htmx-django-intellisense.