HTMX

mizu new ./my-htmx-app --template frontend/htmx
cd my-htmx-app
make dev

Client Request → JSON Response → JavaScript Renders UI

Client Request → HTML Response → Browser Renders UI

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

<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>

npm install htmx.org

import 'htmx.org'

import htmx from 'htmx.org'
window.htmx = htmx

┌─────────────────────────────────────────────────────────────┐
│                      Browser (Port 3000)                     │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                   HTML + HTMX                           │ │
│  │                                                          │ │
│  │  <button hx-get="/users" hx-target="#list">Load</button>│ │
│  │                                                          │ │
│  │  User clicks → HTMX sends GET /users                   │ │
│  │  Server responds with HTML fragment                     │ │
│  │  HTMX swaps content into #list                         │ │
│  └────────────────────────────────────────────────────────┘ │
│                          ▲                                   │
│                          │ HTTP Request                     │
│                          │ (AJAX with HX-Request header)    │
│                          ▼                                   │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                   Static Assets                         │ │
│  │  CSS, Images, HTMX library                             │ │
│  └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                  Mizu Backend (Go Server)                    │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                      Router                             │ │
│  │                                                          │ │
│  │  GET  /              → Render full page                │ │
│  │  GET  /users         → Render HTML fragment            │ │
│  │  POST /users         → Process + return HTML           │ │
│  │  PUT  /users/{id}    → Update + return HTML            │ │
│  │  DELETE /users/{id}  → Remove + return empty           │ │
│  └────────────────────────────────────────────────────────┘ │
│                          │                                   │
│                          ▼                                   │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                  View Engine                            │ │
│  │                                                          │ │
│  │  • Templates (Go html/template)                        │ │
│  │  • Layouts (default.html)                              │ │
│  │  • Pages (home.html, users.html)                       │ │
│  │  • Partials (user-list.html, user-row.html)           │ │
│  │  • Hot reload in dev mode                              │ │
│  └────────────────────────────────────────────────────────┘ │
│                          │                                   │
│                          ▼                                   │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                 Business Logic                          │ │
│  │                                                          │ │
│  │  • Handlers (handleUsers, handleCreateUser)            │ │
│  │  • Services (UserService, AuthService)                 │ │
│  │  • Validation                                           │ │
│  │  • Database access                                      │ │
│  └────────────────────────────────────────────────────────┘ │
│                          │                                   │
│                          ▼                                   │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                    Database                             │ │
│  │  PostgreSQL, SQLite, etc.                              │ │
│  └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                         CDN / Edge                           │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │              Static Assets (Cached)                     │ │
│  │  • CSS, Images                                          │ │
│  │  • HTMX library                                         │ │
│  │  • Versioned and fingerprinted                         │ │
│  └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────────┐
│                    Load Balancer                             │
└─────────────────────────────────────────────────────────────┘
                          │
          ┌───────────────┼───────────────┐
          ▼               ▼               ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Mizu Server 1│ │ Mizu Server 2│ │ Mizu Server 3│
│              │ │              │ │              │
│ Single Binary│ │ Single Binary│ │ Single Binary│
│ • Embedded   │ │ • Embedded   │ │ • Embedded   │
│   Templates  │ │   Templates  │ │   Templates  │
│ • Embedded   │ │ • Embedded   │ │ • Embedded   │
│   Assets     │ │   Assets     │ │   Assets     │
│ • Handlers   │ │ • Handlers   │ │ • Handlers   │
│ • Middleware │ │ • Middleware │ │ • Middleware │
└──────────────┘ └──────────────┘ └──────────────┘
          │               │               │
          └───────────────┼───────────────┘
                          ▼
                ┌──────────────────┐
                │    Database      │
                │  (with pooling)  │
                └──────────────────┘

my-htmx-app/
├── cmd/
│   └── server/
│       └── main.go              # Entry point
├── app/
│   └── server/
│       ├── app.go               # Mizu app setup
│       ├── config.go            # Configuration
│       ├── routes.go            # Routes
│       └── handlers.go          # Request handlers
├── views/                       # HTML templates
│   ├── embed.go                 # Embed directive
│   ├── layouts/
│   │   └── default.html         # Base layout
│   ├── pages/
│   │   ├── home.html            # Home page
│   │   └── about.html           # About page
│   └── partials/                # Reusable components
│       ├── user-list.html       # User list fragment
│       └── user-row.html        # Single user row
├── static/                      # CSS, JS, images
│   ├── embed.go
│   ├── css/
│   │   └── app.css
│   └── js/
│       └── app.js
├── go.mod
└── Makefile

<!-- GET request -->
<button hx-get="/users">Load Users</button>

<!-- POST request -->
<form hx-post="/users">
  <input name="name">
  <button type="submit">Create</button>
</form>

<!-- PUT request -->
<button hx-put="/users/1">Update</button>

<!-- PATCH request -->
<button hx-patch="/users/1">Patch</button>

<!-- DELETE request -->
<button hx-delete="/users/1">Delete</button>

<!-- Target by ID -->
<button hx-get="/users" hx-target="#user-list">Load</button>
<div id="user-list"></div>

<!-- Target closest parent -->
<tr>
  <td>Alice</td>
  <td>
    <button hx-delete="/users/1" hx-target="closest tr">Delete</button>
  </td>
</tr>

<!-- Target this element -->
<div hx-get="/refresh" hx-target="this">Refresh</div>

<!-- Target next sibling -->
<button hx-get="/more" hx-target="next .content">Load More</button>
<div class="content"></div>

<!-- Target previous sibling -->
<button hx-get="/prev" hx-target="previous .content">Load Previous</button>

<!-- Replace inner HTML (default) -->
<div hx-get="/users" hx-swap="innerHTML">Content</div>

<!-- Replace entire element -->
<div hx-get="/users" hx-swap="outerHTML">Content</div>

<!-- Insert before element -->
<div hx-get="/users" hx-swap="beforebegin">Content</div>

<!-- Insert after element -->
<div hx-get="/users" hx-swap="afterend">Content</div>

<!-- Insert at start of children -->
<ul hx-get="/users" hx-swap="afterbegin">...</ul>

<!-- Insert at end of children -->
<ul hx-get="/users" hx-swap="beforeend">...</ul>

<!-- Delete the element -->
<div hx-delete="/users/1" hx-swap="delete">Delete Me</div>

<!-- Don't swap (useful for side effects) -->
<button hx-post="/track" hx-swap="none">Track</button>

<!-- Scroll to top after swap -->
<div hx-get="/users" hx-swap="innerHTML scroll:top">Content</div>

<!-- Scroll to bottom -->
<div hx-get="/messages" hx-swap="beforeend scroll:bottom">Messages</div>

<!-- Show for 1 second then swap -->
<div hx-get="/users" hx-swap="innerHTML show:top">Content</div>

<!-- Swap after delay -->
<div hx-get="/users" hx-swap="innerHTML swap:1s">Content</div>

<!-- Settle after delay -->
<div hx-get="/users" hx-swap="innerHTML settle:2s">Content</div>

<!-- Ignore title in response -->
<div hx-get="/users" hx-swap="innerHTML ignoreTitle:true">Content</div>

<!-- Focus on element after swap -->
<div hx-get="/form" hx-swap="innerHTML focus-scroll:true">Content</div>

<!-- Click (default for buttons) -->
<button hx-get="/users" hx-trigger="click">Load</button>

<!-- Multiple events -->
<input hx-get="/search" hx-trigger="keyup, change">

<!-- Delay -->
<input hx-get="/search" hx-trigger="keyup delay:500ms">

<!-- Throttle (max once per interval) -->
<input hx-get="/search" hx-trigger="keyup throttle:1s">

<!-- Changed (only if value changed) -->
<input hx-get="/search" hx-trigger="keyup changed">

<!-- From another element -->
<input type="text" id="search">
<div hx-get="/results" hx-trigger="keyup from:#search">Results</div>

<!-- On load -->
<div hx-get="/news" hx-trigger="load">Loading...</div>

<!-- On reveal (when scrolled into view) -->
<div hx-get="/more" hx-trigger="revealed">Load more...</div>

<!-- Every N seconds (polling) -->
<div hx-get="/status" hx-trigger="every 2s">Checking...</div>

<!-- Intersection observer -->
<div hx-get="/lazy" hx-trigger="intersect once">Load when visible</div>

<!-- Consume event (prevent default) -->
<form hx-post="/users" hx-trigger="submit consume">
  <button type="submit">Submit</button>
</form>

<!-- Only trigger if Ctrl key is pressed -->
<div hx-get="/users" hx-trigger="click[ctrlKey]">Ctrl+Click to load</div>

<!-- Only if shift key -->
<div hx-get="/users" hx-trigger="click[shiftKey]">Shift+Click to load</div>

<!-- Only if specific mouse button -->
<div hx-get="/users" hx-trigger="click[button==0]">Left-click only</div>

<!-- Check input value -->
<input hx-get="/search" hx-trigger="keyup[target.value.length > 3]">

<!-- Multiple conditions -->
<button hx-get="/users" hx-trigger="click[ctrlKey && shiftKey]">
  Ctrl+Shift+Click
</button>

func handler(c *mizu.Ctx) error {
    // Check if this is an HTMX request
    isHTMX := c.Request().Header.Get("HX-Request") == "true"

    // Get the ID of the target element
    target := c.Request().Header.Get("HX-Target")

    // Get the ID of the triggered element
    trigger := c.Request().Header.Get("HX-Trigger")

    // Get the name attribute of the triggered element
    triggerName := c.Request().Header.Get("HX-Trigger-Name")

    // Get the current URL
    currentURL := c.Request().Header.Get("HX-Current-URL")

    // Check if this is a history restore request
    isHistory := c.Request().Header.Get("HX-History-Restore-Request") == "true"

    // Get the user response to hx-prompt
    prompt := c.Request().Header.Get("HX-Prompt")

    if isHTMX {
        // Return HTML fragment for HTMX requests
        return c.Render("partials/users", data)
    }

    // Return full page for direct navigation
    return c.Render("pages/users", data)
}

func handler(c *mizu.Ctx) error {
    // Trigger a client-side redirect
    c.Writer().Header().Set("HX-Redirect", "/login")

    // Refresh the page
    c.Writer().Header().Set("HX-Refresh", "true")

    // Replace the URL in browser history
    c.Writer().Header().Set("HX-Replace-Url", "/users/page/2")

    // Push new URL to history
    c.Writer().Header().Set("HX-Push-Url", "/users/123")

    // Re-target the response
    c.Writer().Header().Set("HX-Retarget", "#different-element")

    // Change swap strategy
    c.Writer().Header().Set("HX-Reswap", "outerHTML")

    // Trigger client-side events
    c.Writer().Header().Set("HX-Trigger", "userCreated")

    // Trigger after swap
    c.Writer().Header().Set("HX-Trigger-After-Swap", "updateStats")

    // Trigger after settle
    c.Writer().Header().Set("HX-Trigger-After-Settle", "focusInput")

    // Trigger with JSON payload
    c.Writer().Header().Set("HX-Trigger", `{"showMessage": {"level": "info", "text": "User created"}}`)

    return c.Render("partials/user", user)
}

<!-- Default indicator -->
<button hx-get="/users">
  <span class="htmx-indicator">Loading...</span>
  Load Users
</button>

<!-- External indicator -->
<div id="spinner" class="htmx-indicator">
  <img src="/spinner.gif" alt="Loading...">
</div>
<button hx-get="/users" hx-indicator="#spinner">Load</button>

<!-- CSS-based indicator -->
<style>
  .htmx-request .htmx-indicator {
    display: inline;
  }
  .htmx-indicator {
    display: none;
  }
</style>

<button hx-get="/users">
  <span class="htmx-indicator">⏳</span>
  Load Users
</button>

<form hx-post="/users" hx-target="#result">
  <input
    type="text"
    name="email"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  >
  <button type="submit">Submit</button>
</form>
<div id="result"></div>

func handleCreateUser(c *mizu.Ctx) error {
    email := c.FormValue("email")

    // Validate
    if email == "" {
        c.Writer().Header().Set("HX-Retarget", "#error")
        c.Writer().Header().Set("HX-Reswap", "innerHTML")
        return c.HTML(400, `<div class="error">Email is required</div>`)
    }

    if !isValidEmail(email) {
        c.Writer().Header().Set("HX-Retarget", "#error")
        return c.HTML(400, `<div class="error">Invalid email format</div>`)
    }

    // Create user...
    return c.Render("partials/user-row", user)
}

<form hx-post="/users" hx-target="#user-list" hx-swap="beforeend">
  <div id="error"></div>
  <input name="email" type="email" placeholder="Email">
  <button type="submit">Create</button>
</form>

<!-- Main target -->
<div id="user-list"></div>

<!-- Also update this -->
<div id="notification"></div>

<button hx-get="/users" hx-target="#user-list">Load Users</button>

<!-- Main content (goes to hx-target) -->
<div id="user-list">
  <div>Alice</div>
  <div>Bob</div>
</div>

<!-- Out-of-band swap (goes to #notification) -->
<div id="notification" hx-swap-oob="true">
  Loaded 2 users
</div>

<div id="users">...</div>
<div id="stats" hx-swap-oob="true">Users: 2</div>
<div id="notification" hx-swap-oob="beforeend">
  <div class="toast">Users loaded</div>
</div>

<!-- Push URL to history (default for links) -->
<a hx-get="/users/1" hx-push-url="true">View User</a>

<!-- Push different URL -->
<button hx-get="/users/1" hx-push-url="/users/alice">View</button>

<!-- Replace current URL (no new history entry) -->
<button hx-get="/users/1" hx-replace-url="true">View</button>

<!-- Disable history -->
<button hx-get="/users" hx-push-url="false">View</button>

func handleUsers(c *mizu.Ctx) error {
    // Check if this is a history restore
    if c.Request().Header.Get("HX-History-Restore-Request") == "true" {
        // Return full page state
        return c.Render("pages/users", data)
    }

    // Normal HTMX request
    return c.Render("partials/user-list", data)
}

<!-- Queue requests to this element -->
<button hx-get="/slow-endpoint" hx-sync="this:queue">Load</button>

<!-- Drop new requests while one is in flight -->
<button hx-get="/endpoint" hx-sync="this:drop">Load</button>

<!-- Abort current request and make new one -->
<button hx-get="/endpoint" hx-sync="this:abort">Load</button>

<!-- Replace current request -->
<button hx-get="/endpoint" hx-sync="this:replace">Load</button>

<!-- Sync with another element -->
<input hx-get="/search" hx-sync="#search-form:abort">

<!-- Simple confirmation -->
<button
  hx-delete="/users/1"
  hx-confirm="Are you sure you want to delete this user?"
>
  Delete
</button>

<!-- Access prompt value on server -->
<button
  hx-delete="/users/1"
  hx-prompt="Enter your password to confirm"
>
  Delete
</button>

func handleDelete(c *mizu.Ctx) error {
    // Get prompt response
    password := c.Request().Header.Get("HX-Prompt")

    if password != "admin" {
        return c.HTML(403, `<div>Invalid password</div>`)
    }

    // Delete user...
    return c.HTML(200, "")
}

<!-- Boost all links in this div -->
<div hx-boost="true">
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</div>

<!-- Boost a form -->
<form action="/users" method="post" hx-boost="true">
  <input name="name">
  <button type="submit">Create</button>
</form>

<!-- This element won't be replaced during swaps -->
<div hx-preserve="true" id="video-player">
  <video src="/video.mp4" controls></video>
</div>

<div hx-get="/content" hx-target="body">
  <!-- Video player will be preserved -->
</div>

<!-- Disable this button -->
<button hx-post="/users" hx-disable>Create User</button>

<!-- Disable other elements -->
<form hx-post="/users">
  <input name="name" hx-disable-elt="find button">
  <button type="submit">Create</button>
</form>

<!-- Disable multiple elements -->
<form hx-post="/users" hx-disable-elt="find input, find button">
  <input name="name">
  <input name="email">
  <button type="submit">Create</button>
</form>

<!-- Include specific values -->
<button
  hx-get="/users"
  hx-vals='{"page": 1, "sort": "name"}'
>
  Load Users
</button>

<!-- Include from JavaScript -->
<button
  hx-get="/users"
  hx-vals="js:{token: getAuthToken()}"
>
  Load Users
</button>

<!-- Include nearby inputs -->
<input type="text" name="search" value="alice">
<button hx-get="/users" hx-include="[name='search']">Search</button>

<!-- Include form -->
<form id="filters">
  <input name="status" value="active">
  <input name="role" value="admin">
</form>
<button hx-get="/users" hx-include="#filters">Filter</button>

<!-- URL-encoded (default for forms) -->
<form hx-post="/users" hx-encoding="application/x-www-form-urlencoded">
  <input name="name">
  <button type="submit">Create</button>
</form>

<!-- Multipart (for file uploads) -->
<form hx-post="/upload" hx-encoding="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

<button hx-get="/data" hx-target="#result">
  Load Data
</button>
<div id="result"></div>

<div id="user-1">
  <span>Alice</span>
  <button hx-get="/users/1/edit" hx-target="#user-1">Edit</button>
</div>

<div id="user-1">
  <form hx-put="/users/1" hx-target="#user-1">
    <input name="name" value="Alice">
    <button type="submit">Save</button>
    <button hx-get="/users/1" hx-target="#user-1">Cancel</button>
  </form>
</div>

<tr>
  <td>Alice</td>
  <td>alice@example.com</td>
  <td>
    <button
      hx-delete="/users/1"
      hx-target="closest tr"
      hx-swap="outerHTML swap:1s"
      hx-confirm="Delete Alice?"
    >
      Delete
    </button>
  </td>
</tr>

<input
  type="search"
  name="q"
  hx-get="/search"
  hx-trigger="keyup changed delay:500ms"
  hx-target="#search-results"
  hx-indicator="#search-spinner"
  placeholder="Search..."
>
<span id="search-spinner" class="htmx-indicator">Searching...</span>
<div id="search-results"></div>

func handleSearch(c *mizu.Ctx) error {
    query := c.Query("q")

    results := searchUsers(query)

    return c.Render("partials/search-results", map[string]any{
        "Results": results,
        "Query":   query,
    })
}

<div id="posts">
  {{ range .Posts }}
    <div class="post">{{ .Title }}</div>
  {{ end }}

  {{ if .HasMore }}
    <div
      hx-get="/posts?page={{ .NextPage }}"
      hx-trigger="revealed"
      hx-target="#posts"
      hx-swap="beforeend"
    >
      <div class="htmx-indicator">Loading more...</div>
    </div>
  {{ end }}
</div>

func handlePosts(c *mizu.Ctx) error {
    page := c.QueryInt("page", 1)
    limit := 10

    posts, total := getPosts(page, limit)
    hasMore := (page * limit) < total

    return c.Render("partials/posts", map[string]any{
        "Posts":    posts,
        "HasMore":  hasMore,
        "NextPage": page + 1,
    })
}

<div
  hx-get="/lazy-content"
  hx-trigger="intersect once"
  hx-swap="outerHTML"
>
  <div class="skeleton">Loading...</div>
</div>

<!-- Poll every 2 seconds -->
<div hx-get="/stats" hx-trigger="every 2s" hx-swap="innerHTML">
  Loading stats...
</div>

<!-- Stop polling when visible -->
<div
  hx-get="/stats"
  hx-trigger="every 2s [document.hidden == false]"
>
  Loading stats...
</div>

<!-- Start/stop polling -->
<div id="stats" hx-get="/stats" hx-trigger="load, poll from:#poll-btn">
  Stats here
</div>
<button id="poll-btn" hx-trigger="click">Start Polling</button>

<div hx-get="/job/status" hx-trigger="load, every 1s" hx-swap="outerHTML">
  <progress value="0" max="100"></progress>
</div>

func handleJobStatus(c *mizu.Ctx) error {
    job := getJob()

    if job.Progress >= 100 {
        // Job complete, return final content
        return c.Render("partials/job-complete", job)
    }

    // Still in progress, return progress bar
    return c.Render("partials/job-progress", job)
}

<div hx-get="/job/status" hx-trigger="every 1s" hx-swap="outerHTML">
  <progress value="{{ .Progress }}" max="100"></progress>
  <span>{{ .Progress }}% complete</span>
</div>

<form id="bulk-form">
  <table>
    {{ range .Users }}
    <tr>
      <td><input type="checkbox" name="ids" value="{{ .ID }}"></td>
      <td>{{ .Name }}</td>
      <td>{{ .Email }}</td>
    </tr>
    {{ end }}
  </table>

  <button
    hx-delete="/users/bulk"
    hx-include="#bulk-form"
    hx-confirm="Delete selected users?"
    hx-target="body"
  >
    Delete Selected
  </button>
</form>

func handleBulkDelete(c *mizu.Ctx) error {
    ids := c.Request().Form["ids"]

    for _, id := range ids {
        deleteUser(id)
    }

    // Return updated page
    users := getUsers()
    return c.Render("pages/users", map[string]any{
        "Users": users,
    })
}

<select
  name="country"
  hx-get="/states"
  hx-target="#state-select"
  hx-trigger="change"
>
  <option value="">Select Country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<div id="state-select">
  <select name="state" disabled>
    <option>Select country first</option>
  </select>
</div>

func handleStates(c *mizu.Ctx) error {
    country := c.Query("country")
    states := getStatesForCountry(country)

    return c.Render("partials/state-select", map[string]any{
        "States": states,
    })
}

<div>
  <input
    type="search"
    name="q"
    hx-get="/autocomplete"
    hx-trigger="keyup changed delay:300ms"
    hx-target="#suggestions"
    placeholder="Search users..."
  >
  <div id="suggestions"></div>
</div>

func handleAutocomplete(c *mizu.Ctx) error {
    query := c.Query("q")

    if query == "" {
        return c.HTML(200, "")
    }

    suggestions := searchUsers(query, 5)

    return c.Render("partials/suggestions", map[string]any{
        "Suggestions": suggestions,
    })
}

{{ if .Suggestions }}
<ul class="suggestions">
  {{ range .Suggestions }}
  <li>
    <a href="/users/{{ .ID }}">{{ .Name }} ({{ .Email }})</a>
  </li>
  {{ end }}
</ul>
{{ end }}

<form
  hx-post="/upload"
  hx-encoding="multipart/form-data"
  hx-target="#result"
>
  <input type="file" name="file">
  <button type="submit">Upload</button>
  <progress id="upload-progress" value="0" max="100" style="display:none"></progress>
</form>
<div id="result"></div>

<script>
htmx.on('#upload-form', 'htmx:xhr:progress', function(evt) {
  const progress = document.getElementById('upload-progress')
  progress.style.display = 'block'
  progress.setAttribute('value', evt.detail.loaded / evt.detail.total * 100)
})
</script>

<button hx-get="/users/1/delete-confirm" hx-target="#modal">
  Delete User
</button>

<div id="modal"></div>

<div class="modal-backdrop" onclick="this.remove()">
  <div class="modal" onclick="event.stopPropagation()">
    <h2>Confirm Delete</h2>
    <p>Are you sure you want to delete this user?</p>
    <button
      hx-delete="/users/1"
      hx-target="#user-1"
      hx-swap="outerHTML"
      onclick="document.querySelector('.modal-backdrop').remove()"
    >
      Yes, Delete
    </button>
    <button onclick="document.querySelector('.modal-backdrop').remove()">
      Cancel
    </button>
  </div>
</div>

<button
  hx-post="/like"
  hx-swap="outerHTML"
  onclick="this.innerHTML='♥ Liked (124)'"
>
  ♡ Like (123)
</button>

<div id="users">
  <table>
    {{ range .Users }}
    <tr><td>{{ .Name }}</td></tr>
    {{ end }}
  </table>

  <nav>
    {{ if .HasPrev }}
    <button hx-get="/users?page={{ .PrevPage }}" hx-target="#users">
      Previous
    </button>
    {{ end }}

    <span>Page {{ .CurrentPage }} of {{ .TotalPages }}</span>

    {{ if .HasNext }}
    <button hx-get="/users?page={{ .NextPage }}" hx-target="#users">
      Next
    </button>
    {{ end }}
  </nav>
</div>

<div>
  <nav>
    <button
      hx-get="/tabs/profile"
      hx-target="#tab-content"
      class="active"
    >
      Profile
    </button>
    <button
      hx-get="/tabs/settings"
      hx-target="#tab-content"
    >
      Settings
    </button>
    <button
      hx-get="/tabs/activity"
      hx-target="#tab-content"
    >
      Activity
    </button>
  </nav>

  <div id="tab-content" hx-get="/tabs/profile" hx-trigger="load">
    Loading...
  </div>
</div>

<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>

<div hx-ext="sse" sse-connect="/events">
  <div sse-swap="message" hx-swap="beforeend">
    <!-- Messages appear here -->
  </div>
</div>

func handleEvents(c *mizu.Ctx) error {
    c.Writer().Header().Set("Content-Type", "text/event-stream")
    c.Writer().Header().Set("Cache-Control", "no-cache")
    c.Writer().Header().Set("Connection", "keep-alive")

    flusher, ok := c.Writer().(http.Flusher)
    if !ok {
        return fmt.Errorf("streaming not supported")
    }

    for {
        select {
        case msg := <-messageChan:
            fmt.Fprintf(c.Writer(), "event: message\n")
            fmt.Fprintf(c.Writer(), "data: <div>%s</div>\n\n", msg)
            flusher.Flush()
        case <-c.Request().Context().Done():
            return nil
        }
    }
}

<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

<div hx-ext="ws" ws-connect="/chat">
  <div id="messages"></div>

  <form ws-send>
    <input name="message">
    <button type="submit">Send</button>
  </form>
</div>

<script src="https://unpkg.com/htmx.org/dist/ext/preload.js"></script>

<a
  href="/users/1"
  hx-get="/users/1"
  hx-target="#main"
  preload="mousedown"
>
  View User
</a>

<script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>

<button hx-get="/slow" data-loading-disable>
  <span data-loading-class="hidden">Load Data</span>
  <span data-loading-class-remove="hidden" class="hidden">Loading...</span>
</button>

<script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>

<form
  hx-post="/users"
  hx-target="#success"
  hx-target-error="#error"
  hx-target-4*="#validation-error"
  hx-target-5*="#server-error"
>
  <input name="email">
  <button type="submit">Create</button>
</form>

<div id="success"></div>
<div id="error" class="error"></div>
<div id="validation-error" class="error"></div>
<div id="server-error" class="error"></div>

<script src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>

<div
  hx-get="/data"
  classes="add loading:1s, remove loading:1s"
>
  Content
</div>

package server

import (
    "io/fs"

    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/view"

    "taskmanager/static"
    "taskmanager/views"
)

func New(cfg *Config) *mizu.App {
    app := mizu.New()

    // Initialize view engine
    viewsFS, _ := fs.Sub(views.FS, ".")
    v := view.New(view.Config{
        FS:            viewsFS,
        Extension:     ".html",
        DefaultLayout: "default",
        Development:   cfg.Env == "development",
    })
    if err := v.Load(); err != nil {
        panic("failed to load views: " + err.Error())
    }
    app.Use(v.Middleware())

    // Serve static assets
    staticFS, _ := fs.Sub(static.FS, ".")
    app.Static("/static", staticFS)

    // Initialize services
    taskService := NewTaskService()

    // Setup routes
    setupRoutes(app, taskService)

    return app
}

package server

import (
    "sync"
    "time"
)

type Task struct {
    ID          int       `json:"id"`
    Title       string    `json:"title"`
    Description string    `json:"description"`
    Status      string    `json:"status"` // pending, in_progress, completed
    Priority    string    `json:"priority"` // low, medium, high
    CreatedAt   time.Time `json:"created_at"`
    UpdatedAt   time.Time `json:"updated_at"`
}

type TaskService struct {
    tasks  map[int]*Task
    nextID int
    mu     sync.RWMutex
}

func NewTaskService() *TaskService {
    return &TaskService{
        tasks:  make(map[int]*Task),
        nextID: 1,
    }
}

func (s *TaskService) List(filter string) []*Task {
    s.mu.RLock()
    defer s.mu.RUnlock()

    var result []*Task
    for _, task := range s.tasks {
        if filter == "" || task.Status == filter {
            result = append(result, task)
        }
    }
    return result
}

func (s *TaskService) Get(id int) (*Task, bool) {
    s.mu.RLock()
    defer s.mu.RUnlock()

    task, ok := s.tasks[id]
    return task, ok
}

func (s *TaskService) Create(title, description, status, priority string) *Task {
    s.mu.Lock()
    defer s.mu.Unlock()

    task := &Task{
        ID:          s.nextID,
        Title:       title,
        Description: description,
        Status:      status,
        Priority:    priority,
        CreatedAt:   time.Now(),
        UpdatedAt:   time.Now(),
    }

    s.tasks[s.nextID] = task
    s.nextID++

    return task
}

func (s *TaskService) Update(id int, title, description, status, priority string) (*Task, bool) {
    s.mu.Lock()
    defer s.mu.Unlock()

    task, ok := s.tasks[id]
    if !ok {
        return nil, false
    }

    task.Title = title
    task.Description = description
    task.Status = status
    task.Priority = priority
    task.UpdatedAt = time.Now()

    return task, true
}

func (s *TaskService) Delete(id int) bool {
    s.mu.Lock()
    defer s.mu.Unlock()

    if _, ok := s.tasks[id]; !ok {
        return false
    }

    delete(s.tasks, id)
    return true
}

func (s *TaskService) Stats() map[string]int {
    s.mu.RLock()
    defer s.mu.RUnlock()

    stats := map[string]int{
        "total":       len(s.tasks),
        "pending":     0,
        "in_progress": 0,
        "completed":   0,
    }

    for _, task := range s.tasks {
        stats[task.Status]++
    }

    return stats
}

package server

import (
    "github.com/go-mizu/mizu"
)

type Handlers struct {
    taskService *TaskService
}

func NewHandlers(taskService *TaskService) *Handlers {
    return &Handlers{
        taskService: taskService,
    }
}

func (h *Handlers) Home(c *mizu.Ctx) error {
    return c.Render("pages/home", map[string]any{
        "Title": "Task Manager",
    })
}

func (h *Handlers) ListTasks(c *mizu.Ctx) error {
    filter := c.Query("status")
    tasks := h.taskService.List(filter)

    // Check if HTMX request
    if c.Request().Header.Get("HX-Request") == "true" {
        return c.Render("partials/task-list", map[string]any{
            "Tasks":  tasks,
            "Filter": filter,
        })
    }

    // Full page
    return c.Render("pages/tasks", map[string]any{
        "Title":  "Tasks",
        "Tasks":  tasks,
        "Filter": filter,
    })
}

func (h *Handlers) CreateTask(c *mizu.Ctx) error {
    title := c.FormValue("title")
    description := c.FormValue("description")
    status := c.FormValue("status")
    priority := c.FormValue("priority")

    // Validation
    if title == "" {
        c.Writer().Header().Set("HX-Retarget", "#error")
        c.Writer().Header().Set("HX-Reswap", "innerHTML")
        return c.HTML(400, `<div class="error">Title is required</div>`)
    }

    task := h.taskService.Create(title, description, status, priority)

    // Trigger stats update
    c.Writer().Header().Set("HX-Trigger", "taskCreated")

    return c.Render("partials/task-row", map[string]any{
        "Task": task,
    })
}

func (h *Handlers) EditTask(c *mizu.Ctx) error {
    id := c.ParamInt("id")

    task, ok := h.taskService.Get(id)
    if !ok {
        return c.HTML(404, "Task not found")
    }

    return c.Render("partials/task-edit", map[string]any{
        "Task": task,
    })
}

func (h *Handlers) UpdateTask(c *mizu.Ctx) error {
    id := c.ParamInt("id")

    title := c.FormValue("title")
    description := c.FormValue("description")
    status := c.FormValue("status")
    priority := c.FormValue("priority")

    task, ok := h.taskService.Update(id, title, description, status, priority)
    if !ok {
        return c.HTML(404, "Task not found")
    }

    // Trigger stats update
    c.Writer().Header().Set("HX-Trigger", "taskUpdated")

    return c.Render("partials/task-row", map[string]any{
        "Task": task,
    })
}

func (h *Handlers) DeleteTask(c *mizu.Ctx) error {
    id := c.ParamInt("id")

    if !h.taskService.Delete(id) {
        return c.HTML(404, "Task not found")
    }

    // Trigger stats update
    c.Writer().Header().Set("HX-Trigger", "taskDeleted")

    // Return empty response (element will be removed)
    return c.HTML(200, "")
}

func (h *Handlers) Stats(c *mizu.Ctx) error {
    stats := h.taskService.Stats()

    return c.Render("partials/stats", map[string]any{
        "Stats": stats,
    })
}