Todo List

\n \n \n\n

\n All\n Active\n Completed\n

\n\n

\n {% for todo in todos %}\n {% include \"partials/todo-item.html\" %}\n {% endfor %}\n \n \n

\n {{ active_count }} items left\n

.antigravity

# HTMX Server-Driven UI for Google Antigravity

HTMX enables hypermedia-driven applications with minimal JavaScript. This guide covers patterns optimized for Google Antigravity IDE and Gemini 3.

## Basic HTMX Page

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Todo App</title>
  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body>
  <main class="max-w-md mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4">Todo List</h1>
    
    <form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend" hx-on::after-request="this.reset()" class="flex gap-2 mb-4">
      <input type="text" name="text" placeholder="What needs to be done?" required class="flex-1 px-4 py-2 border rounded">
      <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Add</button>
    </form>

    <div class="flex gap-2 mb-4" hx-boost="true">
      <a href="/todos?filter=all" class="px-3 py-1 bg-gray-200 rounded">All</a>
      <a href="/todos?filter=active" class="px-3 py-1 bg-gray-200 rounded">Active</a>
      <a href="/todos?filter=completed" class="px-3 py-1 bg-gray-200 rounded">Completed</a>
    </div>

    <ul id="todo-list" class="space-y-2">
      {% for todo in todos %}
        {% include "partials/todo-item.html" %}
      {% endfor %}
    </ul>
    
    <div id="stats" hx-get="/todos/stats" hx-trigger="todoUpdated from:body" class="mt-4 text-sm text-gray-500">
      {{ active_count }} items left
    </div>
  </main>
</body>
</html>
```

## Todo Item Partial

```html
<li id="todo-{{ todo.id }}" class="flex items-center gap-2 p-2 bg-gray-50 rounded">
  <input type="checkbox" {% if todo.completed %}checked{% endif %} hx-patch="/todos/{{ todo.id }}/toggle" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML">
  <span class="{% if todo.completed %}line-through text-gray-400{% endif %} flex-1">{{ todo.text }}</span>
  <button hx-get="/todos/{{ todo.id }}/edit" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" class="text-blue-500 text-sm">Edit</button>
  <button hx-delete="/todos/{{ todo.id }}" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" hx-confirm="Delete?" class="text-red-500">×</button>
</li>
```

## Express Backend

```typescript
// server.ts
import express from 'express';
import nunjucks from 'nunjucks';

const app = express();
nunjucks.configure('templates', { autoescape: true, express: app });
app.use(express.urlencoded({ extended: true }));

let todos: { id: string; text: string; completed: boolean }[] = [];

app.get('/todos', (req, res) => {
  const filter = req.query.filter as string || 'all';
  let filtered = todos;
  if (filter === 'active') filtered = todos.filter(t => !t.completed);
  if (filter === 'completed') filtered = todos.filter(t => t.completed);
  
  if (req.headers['hx-request']) {
    res.render('partials/todo-list.html', { todos: filtered });
  } else {
    res.render('todos.html', { todos: filtered, active_count: todos.filter(t => !t.completed).length });
  }
});

app.post('/todos', (req, res) => {
  const todo = { id: crypto.randomUUID(), text: req.body.text, completed: false };
  todos.push(todo);
  res.setHeader('HX-Trigger', 'todoUpdated');
  res.render('partials/todo-item.html', { todo });
});

app.patch('/todos/:id/toggle', (req, res) => {
  const todo = todos.find(t => t.id === req.params.id);
  if (todo) {
    todo.completed = !todo.completed;
    res.setHeader('HX-Trigger', 'todoUpdated');
    res.render('partials/todo-item.html', { todo });
  }
});

app.delete('/todos/:id', (req, res) => {
  todos = todos.filter(t => t.id !== req.params.id);
  res.setHeader('HX-Trigger', 'todoUpdated');
  res.send('');
});

app.get('/todos/stats', (req, res) => {
  res.send(`${todos.filter(t => !t.completed).length} items left`);
});

app.listen(3000);
```

## Best Practices

1. **Hypermedia**: Return HTML, not JSON
2. **HX-Trigger**: Cross-component updates
3. **Partials**: Reusable HTML fragments
4. **Progressive Enhancement**: Works without JS
5. **OOB Swaps**: Multi-element updates
6. **History**: hx-push-url for navigation

Google Antigravity's Gemini 3 understands HTMX patterns and generates hypermedia apps.

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 Server-Driven UI for Google Antigravity HTMX enables hypermedia-driven applications with minimal JavaScript. This guide covers patterns optimized for Google Antigravity IDE and Gemini 3. ## Basic HTMX Page ```html <!DOCTYPE html> <html lang="en"> <head> <title>Todo App</title> <script src="https://unpkg.com/htmx.org@1.9.10"></script> </head> <body> <main class="max-w-md mx-auto p-6"> <h1 class="text-2xl font-bold mb-4">Todo List</h1> <form hx-post="/todos" hx-target="#todo-list" hx-swap="beforeend" hx-on::after-request="this.reset()" class="flex gap-2 mb-4"> <input type="text" name="text" placeholder="What needs to be done?" required class="flex-1 px-4 py-2 border rounded"> <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Add</button> </form> <div class="flex gap-2 mb-4" hx-boost="true"> <a href="/todos?filter=all" class="px-3 py-1 bg-gray-200 rounded">All</a> <a href="/todos?filter=active" class="px-3 py-1 bg-gray-200 rounded">Active</a> <a href="/todos?filter=completed" class="px-3 py-1 bg-gray-200 rounded">Completed</a> </div> <ul id="todo-list" class="space-y-2"> {% for todo in todos %} {% include "partials/todo-item.html" %} {% endfor %} </ul> <div id="stats" hx-get="/todos/stats" hx-trigger="todoUpdated from:body" class="mt-4 text-sm text-gray-500"> {{ active_count }} items left </div> </main> </body> </html> ``` ## Todo Item Partial ```html <li id="todo-{{ todo.id }}" class="flex items-center gap-2 p-2 bg-gray-50 rounded"> <input type="checkbox" {% if todo.completed %}checked{% endif %} hx-patch="/todos/{{ todo.id }}/toggle" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML"> <span class="{% if todo.completed %}line-through text-gray-400{% endif %} flex-1">{{ todo.text }}</span> <button hx-get="/todos/{{ todo.id }}/edit" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" class="text-blue-500 text-sm">Edit</button> <button hx-delete="/todos/{{ todo.id }}" hx-target="#todo-{{ todo.id }}" hx-swap="outerHTML" hx-confirm="Delete?" class="text-red-500">×</button> </li> ``` ## Express Backend ```typescript // server.ts import express from 'express'; import nunjucks from 'nunjucks'; const app = express(); nunjucks.configure('templates', { autoescape: true, express: app }); app.use(express.urlencoded({ extended: true })); let todos: { id: string; text: string; completed: boolean }[] = []; app.get('/todos', (req, res) => { const filter = req.query.filter as string || 'all'; let filtered = todos; if (filter === 'active') filtered = todos.filter(t => !t.completed); if (filter === 'completed') filtered = todos.filter(t => t.completed); if (req.headers['hx-request']) { res.render('partials/todo-list.html', { todos: filtered }); } else { res.render('todos.html', { todos: filtered, active_count: todos.filter(t => !t.completed).length }); } }); app.post('/todos', (req, res) => { const todo = { id: crypto.randomUUID(), text: req.body.text, completed: false }; todos.push(todo); res.setHeader('HX-Trigger', 'todoUpdated'); res.render('partials/todo-item.html', { todo }); }); app.patch('/todos/:id/toggle', (req, res) => { const todo = todos.find(t => t.id === req.params.id); if (todo) { todo.completed = !todo.completed; res.setHeader('HX-Trigger', 'todoUpdated'); res.render('partials/todo-item.html', { todo }); } }); app.delete('/todos/:id', (req, res) => { todos = todos.filter(t => t.id !== req.params.id); res.setHeader('HX-Trigger', 'todoUpdated'); res.send(''); }); app.get('/todos/stats', (req, res) => { res.send(`${todos.filter(t => !t.completed).length} items left`); }); app.listen(3000); ``` ## Best Practices 1. **Hypermedia**: Return HTML, not JSON 2. **HX-Trigger**: Cross-component updates 3. **Partials**: Reusable HTML fragments 4. **Progressive Enhancement**: Works without JS 5. **OOB Swaps**: Multi-element updates 6. **History**: hx-push-url for navigation Google Antigravity's Gemini 3 understands HTMX patterns and generates hypermedia apps.

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

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?

Todo List

HTMX Server-Driven UI Patterns

When to Use This Prompt

How to Use

Best Practices

Frequently Asked Questions

Related Prompts

💬 Comments

Todo List

HTMX Server-Driven UI Patterns

When to Use This Prompt

How to Use

Best Practices

Frequently Asked Questions

Related Prompts

💬 Comments