# htmx — Dynamic HTML Without JavaScript

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

## Install

Save in your project root:

# htmx — Dynamic HTML Without JavaScript

## Quick Use

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

Or install:
```bash
npm install htmx.org
```

```html
<!-- 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

```html
<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>
```

```python
# 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

```html
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

```html
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

```html
<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](https://github.com/bigskysoftware). Licensed under BSD-2-Clause.
>
> [htmx](https://github.com/bigskysoftware/htmx) — ⭐ 47,700+

---

<!-- ZH -->

## 快速使用

```html
<script src="https://unpkg.com/htmx.org@2"></script>
<button hx-get="/api/data" hx-target="#results">Load</button>
<div id="results"></div>
```

---

## 简介

htmx 是拥有 47,700+ GitHub stars 的 HTML 扩展库，通过属性添加 AJAX、WebSocket 和 CSS 过渡。无需写 JavaScript。14KB 体积，搭配任何服务器框架。适合 AI 演示和内部工具。

---

## 来源与感谢

> Created by [Big Sky Software](https://github.com/bigskysoftware). Licensed under BSD-2-Clause.
>
> [htmx](https://github.com/bigskysoftware/htmx) — ⭐ 47,700+


---
Source: https://tokrepo.com/en/workflows/bd7355cb-83fc-4b6f-a446-2b13b92fbf26
Author: AI Open Source