DEV Community

Alex Spinov
Alex Spinov

Posted on

htmx Has a Free Library — Build Dynamic UIs Without Writing JavaScript

#webdev #html #htmx #javascript

Not Everything Needs React

Your contact form does not need a 200KB JavaScript bundle. Your search-as-you-type does not need React Query. Your infinite scroll does not need a virtual DOM.

htmx: HTML-Driven Interactivity

htmx gives HTML superpowers. Any element can make HTTP requests. Any response can update any part of the page. No JavaScript required.

Add htmx to Any Page 

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

14KB. No build step. No npm install. One script tag.

Click to Load 

<button hx-get="/api/users" hx-target="#user-list">
  Load Users
</button>

<div id="user-list">
  <!-- Users appear here -->
</div>
Enter fullscreen mode Exit fullscreen mode

Click the button → GET /api/users → server returns HTML → htmx swaps it into #user-list.

Search as You Type 

<input type="search" 
       name="q"
       hx-get="/search" 
       hx-trigger="keyup changed delay:300ms"
       hx-target="#results">

<div id="results"></div>
Enter fullscreen mode Exit fullscreen mode

Type → wait 300ms → GET /search?q=query → results appear. Zero JavaScript.

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

When the row becomes visible → load next page → append after this row.

Delete With Confirmation 

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

Confirm → DELETE request → remove the table row. No JavaScript.

Why htmx Is Winning

1. Server Returns HTML, Not JSON

Your server renders the HTML fragment. No JSON serialization. No client-side template. No state management.

# Flask backend
@app.route('/search')
def search():
    results = db.search(request.args['q'])
    return render_template('_results.html', results=results)
Enter fullscreen mode Exit fullscreen mode

2. Works With Any Backend

Django, Rails, Flask, Express, Go, PHP — any backend that returns HTML works with htmx.

3. Progressive Enhancement

Forms work without JavaScript. htmx makes them better but they degrade gracefully.

htmx vs React/SPA

Feature htmx React SPA
Bundle size 14KB 200KB+
Build step None Required
State management Server Client
SEO Built-in SSR needed
Learning curve Know HTML React + ecosystem
Backend Any API-only
Interactivity Good Excellent

When to Use htmx

  • CRUD apps (admin panels, dashboards)
  • Content sites with interactive elements
  • Server-rendered apps (Django, Rails, Laravel)
  • Teams that know backend but not React

When to Use React

  • Complex interactivity (drag-and-drop, real-time collaboration)
  • Offline-first apps
  • Mobile apps (React Native)

Get Started

Add one script tag. Start using hx- attributes. That is it.

Building web apps that need data? 88+ scrapers on Apify. Custom data extraction: spinov001@gmail.com

Top comments (0)