DEV Community

Alex Spinov
Alex Spinov

Posted on

htmx Is Not a Framework — It Is a Better Way to Build Web Apps

#htmx #webdev #javascript #tutorial

JavaScript Frameworks Solved a Problem Most Apps Do Not Have

Most web apps are CRUD. Forms, lists, dashboards. You do not need React for that. htmx lets you build interactive web apps using HTML attributes instead of JavaScript.

Before htmx (React) 

// UserList.jsx - 50 lines
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users").then(r => r.json()).then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
Enter fullscreen mode Exit fullscreen mode

After htmx (HTML) 

<div hx-get="/api/users" hx-trigger="load" hx-indicator="#spinner">
  <div id="spinner" class="htmx-indicator">Loading...</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Server returns HTML, not JSON. No state management. No build step. No node_modules.

Common Patterns

Click to Load More 

<button hx-get="/api/users?page=2" hx-target="#user-list" hx-swap="beforeend">
  Load More
</button>
Enter fullscreen mode Exit fullscreen mode

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

Delete With Confirmation 

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

Infinite Scroll 

<div hx-get="/api/feed?page=2" 
  hx-trigger="revealed" 
  hx-swap="afterend">
  Loading more...
</div>
Enter fullscreen mode Exit fullscreen mode

When to Use htmx

  • CRUD apps, admin dashboards, internal tools
  • Server-rendered apps (Django, Rails, Laravel, Go)
  • When you want to ship fast without a build step
  • When your team knows backend but not React

When NOT to Use htmx

  • Highly interactive apps (Figma, Google Docs)
  • Offline-first apps
  • Apps that need complex client-side state

htmx vs React vs Alpine.js

Feature htmx React Alpine.js
Bundle size 14KB 130KB+ 15KB
Build step No Yes No
Learning curve 1 hour 1 week 2 hours
Server rendering Required Optional Optional
State management Server Client Client

More | GitHub

More from me: 10 Dev Tools I Use Daily | 77 Scrapers on a Schedule | 150+ Free APIs

Top comments (0)