ConfigsApr 3, 2026·2 min read

htmx — Dynamic HTML Without JavaScript

Add AJAX, WebSockets, and CSS transitions to HTML with attributes. No JS framework needed. 47K+ GitHub stars.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

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

Or install:

npm install htmx.org
<!-- Click button, GET /api/data, replace #results -->
<button hx-get="/api/data" hx-target="#results">
    Load Data
</button>
<div id="results"></div>

<!-- Submit form, POST, replace content -->
<form hx-post="/api/chat" hx-target="#response" hx-swap="innerHTML">
    <input name="prompt" placeholder="Ask AI...">
    <button type="submit">Send</button>
</form>
<div id="response"></div>

<!-- Infinite scroll -->
<div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend">
    Loading more...
</div>
Intro

htmx is a library with 47,700+ GitHub stars that extends HTML with attributes for AJAX requests, WebSocket connections, CSS transitions, and server-sent events — all without writing JavaScript. Add hx-get, hx-post, hx-target, and hx-swap attributes to any HTML element and htmx handles the rest. It's the simplest way to build dynamic web interfaces, especially for AI demos and tools where the backend does the heavy lifting. At just 14KB (gzipped), htmx pairs perfectly with any server framework (Python, Go, Node.js, Ruby).

Works with: Any server framework (FastAPI, Flask, Django, Express, Go, Ruby), any HTML page. Best for developers who want dynamic UIs without a JavaScript framework. Setup time: under 1 minute.

htmx Core Attributes

Attribute Description Example
hx-get GET request on trigger hx-get="/api/data"
hx-post POST request hx-post="/api/chat"
hx-target Where to put response hx-target="#results"
hx-swap How to insert response hx-swap="innerHTML"
hx-trigger When to fire hx-trigger="click"
hx-indicator Loading spinner hx-indicator="#spinner"

AI Chat with htmx + FastAPI

<form hx-post="/chat" hx-target="#messages" hx-swap="beforeend" hx-indicator="#loading">
    <input name="prompt" placeholder="Ask anything..." autocomplete="off">
    <button>Send</button>
    <span id="loading" class="htmx-indicator">Thinking...</span>
</form>
<div id="messages"></div>
# FastAPI backend
from fastapi import FastAPI, Form
from fastapi.responses import HTMLResponse
import openai

app = FastAPI()

@app.post("/chat", response_class=HTMLResponse)
async def chat(prompt: str = Form()):
    response = openai.chat.completions.create(
        model="gpt-4o",
        messages=[{"role": "user", "content": prompt}]
    )
    answer = response.choices[0].message.content
    return f'<div class="message"><b>You:</b> {prompt}</div><div class="message"><b>AI:</b> {answer}</div>'

Swap Strategies

hx-swap="innerHTML"   <!-- Replace inner HTML -->
hx-swap="outerHTML"   <!-- Replace entire element -->
hx-swap="beforeend"   <!-- Append inside -->
hx-swap="afterend"    <!-- Insert after -->
hx-swap="delete"      <!-- Remove element -->
hx-swap="none"        <!-- No DOM update -->

Triggers

hx-trigger="click"                <!-- On click (default for buttons) -->
hx-trigger="submit"               <!-- On form submit -->
hx-trigger="keyup changed delay:500ms"  <!-- Debounced search -->
hx-trigger="revealed"             <!-- When scrolled into view -->
hx-trigger="every 5s"             <!-- Polling -->
hx-trigger="sse:message"          <!-- Server-sent events -->

SSE for Streaming AI

<div hx-ext="sse" sse-connect="/stream" sse-swap="message">
    <!-- Streaming AI response appears here -->
</div>

FAQ

Q: What is htmx? A: htmx is a 14KB library with 47,700+ GitHub stars that adds AJAX, WebSockets, and CSS transitions to HTML via attributes — no JavaScript framework required.

Q: Why use htmx for AI tools? A: AI backends (Python/Go) do the heavy lifting. htmx lets you build dynamic UIs that talk to your backend without a JavaScript build step. Perfect for AI demos, internal tools, and prototypes.

Q: Is htmx free? A: Yes, open-source under BSD-2-Clause license.

🙏

Source & Thanks

Created by Big Sky Software. Licensed under BSD-2-Clause.

htmx — ⭐ 47,700+

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Llama Stack — Meta AI Agent Development Platform

Meta's official framework for building AI agents with Llama models. Includes tool calling, RAG, safety guardrails, memory, and evaluation in a unified API.

AI Open Source
◈Home🔍Search👤Me