DEV Community

Alex Spinov
Alex Spinov

Posted on

htmx Has Free Interactive HTML Without JavaScript — Here's Why It's Going Viral

#webdev #html #htmx #javascript

What if you could build interactive web apps without writing JavaScript? htmx makes HTML do what JavaScript frameworks do — with zero build step.

What is htmx?

htmx gives you access to AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML, using attributes. No JavaScript required.

Quick Start 

<script src="https://unpkg.com/htmx.org@2.0.0"></script>
Enter fullscreen mode Exit fullscreen mode

That is it. No npm, no bundler, no build step.

Click to Load 

<button hx-get="/api/users" hx-target="#user-list" hx-swap="innerHTML">
  Load Users
</button>
<div id="user-list"></div>
Enter fullscreen mode Exit fullscreen mode

When clicked, htmx makes a GET to /api/users and puts the HTML response into #user-list.

Search as You Type 

<input type="search" name="q"
       hx-get="/search" 
       hx-trigger="input changed delay:300ms" 
       hx-target="#results">
<div id="results"></div>
Enter fullscreen mode Exit fullscreen mode

Infinite Scroll 

<tr hx-get="/contacts?page=2" 
    hx-trigger="revealed" 
    hx-swap="afterend">
  <td>Loading more...</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

Form Submit 

<form hx-post="/contacts" 
      hx-target="#contact-list" 
      hx-swap="beforeend">
  <input name="name" placeholder="Name">
  <input name="email" placeholder="Email">
  <button type="submit">Add Contact</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Delete with Confirmation 

<button hx-delete="/contacts/1" 
        hx-confirm="Are you sure?" 
        hx-target="closest tr" 
        hx-swap="outerHTML">
  Delete
</button>
Enter fullscreen mode Exit fullscreen mode

Key Attributes

Attribute What it does
hx-get GET request
hx-post POST request
hx-put PUT request
hx-delete DELETE request
hx-target Where to put response
hx-swap How to swap content
hx-trigger What triggers the request
hx-confirm Confirmation dialog
hx-indicator Loading indicator

Swap Strategies

  • innerHTML — Replace inner HTML (default)
  • outerHTML — Replace entire element
  • beforeend — Append inside element
  • afterend — Insert after element
  • delete — Delete the target
  • none — Just make the request

Loading Indicators 

<button hx-get="/slow-endpoint" hx-indicator="#spinner">
  Fetch Data
  <span id="spinner" class="htmx-indicator">Loading...</span>
</button>
Enter fullscreen mode Exit fullscreen mode

Server-Sent Events 

<div hx-ext="sse" sse-connect="/events">
  <div sse-swap="message">Waiting for messages...</div>
</div>
Enter fullscreen mode Exit fullscreen mode

htmx vs React

Feature htmx React
Bundle Size 14KB 140KB+
Build Step None Required
Language HTML JSX
State Server Client
SEO Built-in SSR needed
Learning Curve Minutes Weeks

Need structured data for your web app? Check out my Apify actors — get clean data from any website. For custom solutions, email spinov001@gmail.com.

Top comments (0)