atoolz

atoolz / htmx-devtools

Public

Browser DevTools extension for debugging HTMX applications

atoolz.github.iohtmx-devtools
26
0
100% credibility
Found Mar 25, 2026 at 26 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Browser add-on that lets people watch and debug real-time updates on websites built with HTMX.

How It Works

1
🕵️‍♂️ Discover the helper

While building an interactive website that updates without full page reloads, you find this friendly browser companion made for spotting how those updates work.

2
🔧 Add to your browser

In a few easy steps, load it into Chrome, Firefox, or similar browsers, just like installing any useful add-on from its page.

3
🌐 Visit your site

Head to your dynamic webpage or try the ready-made demo to see live interactions in action.

4
🔍 Open the magic panel

Press F12 to reveal your browser's hidden toolbox, where a new section lights up showing everything happening right now.

5
📊 Watch updates unfold

Colorful lists and timelines appear, revealing network chats, content swaps, and any hiccups as you click around.

6
🖱️ Pick and explore

Click buttons to highlight page parts, inspect their connections, and follow the trail of changes effortlessly.

✅ Fix and shine

With a clear picture of what's working or not, your website becomes smooth, fast, and bug-free.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 26 to 26 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is htmx-devtools?

This TypeScript-powered browser DevTools extension adds an HTMX-specific panel to Chrome, Edge, Firefox, Brave, and more, capturing the full request lifecycle, element hierarchies, event timelines, DOM swap diffs, and silent errors in real time. It solves HTMX debugging headaches like tracking resolved targets, swap strategies, and OOB updates without sifting through generic network tabs or console noise. Install via unpacked extension or build from source for browser DevTools on Mac, Windows, or Linux.

Why is it gaining traction?

Unlike generic tools, it visualizes HTMX phases (config, send, wait, swap, settle) with timelines, before/after DOM diffs, and correlated events—perfect for pinpointing swap errors or target mismatches. The live demo page mocks a full HTMX app for instant testing, and record/pause controls keep sessions lightweight. Cross-browser support including Edge and Firefox, plus element pickers and hover highlights, hooks devs tired of manual inspections.

Who should use this?

HTMX builders debugging dynamic forms, polling, or multi-step interactions in SPAs. Frontend teams tracing elusive errors like target-not-found or network timeouts during development. Suited for browser DevTools users on desktop (Mac, Windows) or via shortcuts in Edge/Firefox workflows, especially those evaluating htmx applications before production.

Verdict

Worth loading for any serious HTMX project—the focused panels cut debug time dramatically. With 23 stars and 1.0% credibility, it's immature but feature-complete, with excellent README docs, tests, and a no-server demo; monitor for updates as adoption grows.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.