HTMX Hypermedia Patterns | Google Antigravity Directory

.antigravity

# HTMX Hypermedia Patterns for Google Antigravity IDE

Build dynamic server-rendered applications with HTMX using Google Antigravity IDE. This comprehensive guide covers hypermedia patterns, progressive enhancement, and real-time updates without writing JavaScript.

## Core HTMX Patterns

```html
<!-- templates/todos/list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/htmx.org@1.9"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
</head>
<body>
  <div id="todo-app" class="container">
    <!-- Add Todo Form with Active Search -->
    <form hx-post="/todos" 
          hx-target="#todo-list" 
          hx-swap="afterbegin"
          hx-on::after-request="this.reset()">
      <input type="text" 
             name="title" 
             placeholder="Add a new todo..."
             hx-get="/todos/search"
             hx-trigger="keyup changed delay:300ms"
             hx-target="#search-results"
             autocomplete="off" />
      <button type="submit">Add</button>
    </form>
    
    <div id="search-results"></div>

    <!-- Filter Tabs -->
    <nav hx-boost="true" class="filters">
      <a href="/todos?filter=all" 
         hx-get="/todos?filter=all"
         hx-target="#todo-list"
         hx-push-url="true">All</a>
      <a href="/todos?filter=active"
         hx-get="/todos?filter=active"
         hx-target="#todo-list"
         hx-push-url="true">Active</a>
      <a href="/todos?filter=completed"
         hx-get="/todos?filter=completed"
         hx-target="#todo-list"
         hx-push-url="true">Completed</a>
    </nav>

    <!-- Todo List with Infinite Scroll -->
    <ul id="todo-list"
        hx-get="/todos?page=2"
        hx-trigger="revealed"
        hx-swap="beforeend"
        hx-indicator="#loading">
      {% for todo in todos %}
        {% include "todos/_todo_item.html" %}
      {% endfor %}
    </ul>
    
    <div id="loading" class="htmx-indicator">Loading...</div>
  </div>
</body>
</html>
```

## Partial Templates

```html
<!-- templates/todos/_todo_item.html -->
<li id="todo-{{ todo.id }}" 
    class="todo-item {{ 'completed' if todo.completed else '' }}">
  
  <!-- Inline Editing -->
  <span class="todo-text"
        hx-get="/todos/{{ todo.id }}/edit"
        hx-trigger="dblclick"
        hx-swap="outerHTML">
    {{ todo.title }}
  </span>

  <!-- Toggle Completion -->
  <input type="checkbox" 
         {{ 'checked' if todo.completed else '' }}
         hx-post="/todos/{{ todo.id }}/toggle"
         hx-target="#todo-{{ todo.id }}"
         hx-swap="outerHTML" />

  <!-- Delete with Confirmation -->
  <button hx-delete="/todos/{{ todo.id }}"
          hx-target="#todo-{{ todo.id }}"
          hx-swap="outerHTML swap:500ms"
          hx-confirm="Delete this todo?"
          class="delete-btn">×</button>
</li>

<!-- templates/todos/_edit_form.html -->
<form hx-put="/todos/{{ todo.id }}"
      hx-target="#todo-{{ todo.id }}"
      hx-swap="outerHTML"
      class="edit-form">
  <input type="text" 
         name="title" 
         value="{{ todo.title }}"
         hx-on:keydown.escape="htmx.ajax('GET', '/todos/{{ todo.id }}', '#todo-{{ todo.id }}')" />
  <button type="submit">Save</button>
</form>
```

## Server-Side Implementation

```python
# app/routes/todos.py
from fastapi import APIRouter, Request, Form
from fastapi.responses import HTMLResponse
from app.templates import templates

router = APIRouter()

@router.post("/todos", response_class=HTMLResponse)
async def create_todo(request: Request, title: str = Form(...)):
    todo = await Todo.create(title=title)
    
    # Return only the new todo item partial
    return templates.TemplateResponse(
        "todos/_todo_item.html",
        {"request": request, "todo": todo}
    )

@router.post("/todos/{todo_id}/toggle", response_class=HTMLResponse)
async def toggle_todo(request: Request, todo_id: int):
    todo = await Todo.get(todo_id)
    todo.completed = not todo.completed
    await todo.save()
    
    # HX-Trigger for toast notification
    response = templates.TemplateResponse(
        "todos/_todo_item.html",
        {"request": request, "todo": todo}
    )
    response.headers["HX-Trigger"] = "todoUpdated"
    return response
```

## Best Practices for Google Antigravity IDE

When building HTMX applications with Google Antigravity, use partial templates for targeted updates. Implement proper HTTP methods for CRUD operations. Leverage hx-boost for progressive enhancement. Use hx-indicator for loading states. Implement WebSocket extensions for real-time features. Let Gemini 3 generate matching server endpoints and templates from your HTMX attributes.

Google Antigravity excels at generating hypermedia-driven backends that match your HTMX frontend patterns.

When to Use This Prompt

This HTMX prompt is ideal for developers working on:

HTMX applications requiring modern best practices and optimal performance
Projects that need production-ready HTMX code with proper error handling
Teams looking to standardize their htmx development workflow
Developers wanting to learn industry-standard HTMX patterns and techniques

By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their htmx implementations.

How to Use

Copy the prompt - Click the copy button above to copy the entire prompt to your clipboard
Paste into your AI assistant - Use with Claude, ChatGPT, Cursor, or any AI coding tool
Customize as needed - Adjust the prompt based on your specific requirements
Review the output - Always review generated code for security and correctness

💡 Pro Tip: For best results, provide context about your project structure and any specific constraints or preferences you have.

Best Practices

✓ Always review generated code for security vulnerabilities before deploying
✓ Test the HTMX code in a development environment first
✓ Customize the prompt output to match your project's coding standards
✓ Keep your AI assistant's context window in mind for complex requirements
✓ Version control your prompts alongside your code for reproducibility

Frequently Asked Questions

Can I use this HTMX prompt commercially?

Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.

Which AI assistants work best with this prompt?

This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.

How do I customize this prompt for my specific needs?

You can modify the prompt by adding specific requirements, constraints, or preferences. For HTMX projects, consider mentioning your framework version, coding style, and any specific libraries you're using.

Related Prompts

💬 Comments

Loading comments...

# HTMX Hypermedia Patterns for Google Antigravity IDE Build dynamic server-rendered applications with HTMX using Google Antigravity IDE. This comprehensive guide covers hypermedia patterns, progressive enhancement, and real-time updates without writing JavaScript. ## Core HTMX Patterns ```html  <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/htmx.org@1.9"></script> <script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script> </head> <body> <div id="todo-app" class="container">  <form hx-post="/todos" hx-target="#todo-list" hx-swap="afterbegin" hx-on::after-request="this.reset()"> <input type="text" name="title" placeholder="Add a new todo..." hx-get="/todos/search" hx-trigger="keyup changed delay:300ms" hx-target="#search-results" autocomplete="off" /> <button type="submit">Add</button> </form> <div id="search-results"></div>  <nav hx-boost="true" class="filters"> <a href="/todos?filter=all" hx-get="/todos?filter=all" hx-target="#todo-list" hx-push-url="true">All</a> <a href="/todos?filter=active" hx-get="/todos?filter=active" hx-target="#todo-list" hx-push-url="true">Active</a> <a href="/todos?filter=completed" hx-get="/todos?filter=completed" hx-target="#todo-list" hx-push-url="true">Completed</a> </nav>  <ul id="todo-list" hx-get="/todos?page=2" hx-trigger="revealed" hx-swap="beforeend" hx-indicator="#loading"> {% for todo in todos %} {% include "todos/_todo_item.html" %} {% endfor %} </ul> <div id="loading" class="htmx-indicator">Loading...</div> </div> </body> </html> ``` ## Partial Templates ```html  <li id="todo-{{ todo.id }}" class="todo-item {{ 'completed' if todo.completed else '' }}">  <span class="todo-text" hx-get="/todos/{{ todo.id }}/edit" hx-trigger="dblclick" hx-swap="outerHTML"> {{ todo.title }} </span>  <input type="checkbox" {{ 'checked' if todo.completed else '' }} hx-post="/todos/{{ todo.id }}/toggle" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" />  <button hx-delete="/todos/{{ todo.id }}" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML swap:500ms" hx-confirm="Delete this todo?" class="delete-btn">×</button> </li>  <form hx-put="/todos/{{ todo.id }}" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" class="edit-form"> <input type="text" name="title" value="{{ todo.title }}" hx-on:keydown.escape="htmx.ajax('GET', '/todos/{{ todo.id }}', '#todo-{{ todo.id }}')" /> <button type="submit">Save</button> </form> ``` ## Server-Side Implementation ```python # app/routes/todos.py from fastapi import APIRouter, Request, Form from fastapi.responses import HTMLResponse from app.templates import templates router = APIRouter() @router.post("/todos", response_class=HTMLResponse) async def create_todo(request: Request, title: str = Form(...)): todo = await Todo.create(title=title) # Return only the new todo item partial return templates.TemplateResponse( "todos/_todo_item.html", {"request": request, "todo": todo} ) @router.post("/todos/{todo_id}/toggle", response_class=HTMLResponse) async def toggle_todo(request: Request, todo_id: int): todo = await Todo.get(todo_id) todo.completed = not todo.completed await todo.save() # HX-Trigger for toast notification response = templates.TemplateResponse( "todos/_todo_item.html", {"request": request, "todo": todo} ) response.headers["HX-Trigger"] = "todoUpdated" return response ``` ## Best Practices for Google Antigravity IDE When building HTMX applications with Google Antigravity, use partial templates for targeted updates. Implement proper HTTP methods for CRUD operations. Leverage hx-boost for progressive enhancement. Use hx-indicator for loading states. Implement WebSocket extensions for real-time features. Let Gemini 3 generate matching server endpoints and templates from your HTMX attributes. Google Antigravity excels at generating hypermedia-driven backends that match your HTMX frontend patterns.