Day 1: The Hypermedia Mindset

Welcome to Day 1 of your journey into htmx.

For the last decade, we’ve been taught that the “modern” way to build web apps is to send JSON back and forth between a React/Vue/Angular frontend and a REST API.

htmx asks: Why?

Why stop using HTML? The browser is incredibly good at rendering it. htmx gives standard HTML the power to drive dynamic interactions, allowing you to build “SPA-like” experiences without the Javascript fatigue.

Setup

It’s just a script tag. No build step required (though you can use npm if you want).

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/htmx.org@2.0.0"></script>
</head>
<body>
    <!-- Your app here -->
</body>
</html>

Your First Request

In standard HTML, only <a> and <form> can make HTTP requests. In htmx, any element can make a request.

<!-- When clicked, issue a GET to /hello -->
<button hx-get="/hello" hx-swap="outerHTML">
    Click Me
</button>

What happens?

User clicks the button.
AJAX request is sent to /hello.
Server returns HTML (e.g., <button>Hello World!</button>).
htmx swaps the old button with the new HTML.

Challenge for Day 1

Create an index.html with the htmx script.
Add a <div> with hx-get="/quote".
Since we don’t have a backend here, mock the experience by imagining the server returns <blockquote>Stay hungry, stay foolish.</blockquote>.

Visualizing the Code:

<div hx-get="/api/quote" hx-trigger="load">
    Loading quote...
</div>

Welcome to the future of the past. Tomorrow: Triggers.