htmx — Dynamic HTML Without JavaScript

What it is

htmx is a JavaScript library that extends HTML with attributes for making AJAX requests, handling WebSocket connections, and triggering CSS transitions. Instead of writing JavaScript or using a frontend framework, you add attributes like hx-get, hx-post, and hx-swap to your HTML elements. The server returns HTML fragments, and htmx swaps them into the page.

It targets backend developers who want to build dynamic web interfaces without learning React, Vue, or Angular, and teams that prefer server-rendered HTML over single-page application architectures.

How it saves time or tokens

htmx eliminates the need for a separate frontend build system, JavaScript framework, and API serialization layer. Your server renders HTML directly, and htmx handles the dynamic parts. For AI applications, this means you can build interactive UIs (streaming responses, live updates, form submissions) by returning HTML from your Python/Go/Ruby backend without a JSON API or React frontend.

How to use

1. Include htmx:

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

1. Add dynamic behavior with attributes:

<!-- Click button, GET /api/result, swap inner HTML -->
<button hx-get="/api/result" hx-target="#output" hx-swap="innerHTML">
    Get AI Result
</button>
<div id="output">Results appear here</div>

<!-- Form that POSTs without page reload -->
<form hx-post="/api/generate" hx-target="#response">
    <input name="prompt" placeholder="Enter prompt...">
    <button type="submit">Generate</button>
</form>
<div id="response"></div>

1. The server returns HTML fragments, not JSON.

Example

<!-- AI chat interface with htmx -->
<div id="chat-container">
    <div id="messages"></div>
    
    <form hx-post="/api/chat" 
          hx-target="#messages" 
          hx-swap="beforeend"
          hx-on::after-request="this.reset()">
        <input name="message" placeholder="Ask the AI..." autocomplete="off">
        <button type="submit">Send</button>
    </form>
</div>

<!-- Server endpoint returns HTML like: -->
<!-- <div class='message user'>Your question</div> -->
<!-- <div class='message ai'>AI response here...</div> -->

Related on TokRepo

• AI tools for coding -- Developer tools and frameworks
• Featured workflows -- Curated developer resources

Common pitfalls

• htmx requires your server to return HTML fragments, not JSON. If your backend is built as a JSON API, you need to add HTML-rendering endpoints or use a template engine.
• Complex state management (multi-step forms, dependent dropdowns, real-time validation) can become awkward with htmx attributes alone. For highly interactive UIs, a framework may be more appropriate.
• SEO works well since htmx enhances server-rendered HTML. However, search engine crawlers may not follow htmx-triggered content loads, so ensure important content is in the initial HTML.