Google Antigravity Directory

The #1 directory for Google Antigravity prompts, rules, workflows & MCP servers. Optimized for Gemini 3 agentic development.

Resources

PromptsMCP ServersAntigravity RulesGEMINI.md GuideBest Practices

Company

Submit PromptAntigravityAI.directory

Popular Prompts

Next.js 14 App RouterReact TypeScriptTypeScript AdvancedFastAPI GuideDocker Best Practices

Legal

Privacy PolicyTerms of ServiceContact Us
Featured on FazierVerified on Verified ToolsFeatured on WayfindioAntigravity AI - Featured on Startup FameFeatured on Wired BusinessFeatured on Twelve ToolsListed on Turbo0Featured on findly.toolsFeatured on Aura++That App ShowFeatured on FazierVerified on Verified ToolsFeatured on WayfindioAntigravity AI - Featured on Startup FameFeatured on Wired BusinessFeatured on Twelve ToolsListed on Turbo0Featured on findly.toolsFeatured on Aura++That App Show

Ā© 2026 Antigravity AI Directory. All rights reserved.

The #1 directory for Google Antigravity IDE

This website is not affiliated with, endorsed by, or associated with Google LLC. "Google" and "Gemini" are trademarks of Google LLC.

\n\n\n
\n

Todo List

\n \n
\n \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
\n
\n\n\n```\n\n## Todo Item Partial\n\n```html\n
  • \n \n {{ todo.text }}\n \n \n
  • \n```\n\n## Express Backend\n\n```typescript\n// server.ts\nimport express from 'express';\nimport nunjucks from 'nunjucks';\n\nconst app = express();\nnunjucks.configure('templates', { autoescape: true, express: app });\napp.use(express.urlencoded({ extended: true }));\n\nlet todos: { id: string; text: string; completed: boolean }[] = [];\n\napp.get('/todos', (req, res) => {\n const filter = req.query.filter as string || 'all';\n let filtered = todos;\n if (filter === 'active') filtered = todos.filter(t => !t.completed);\n if (filter === 'completed') filtered = todos.filter(t => t.completed);\n \n if (req.headers['hx-request']) {\n res.render('partials/todo-list.html', { todos: filtered });\n } else {\n res.render('todos.html', { todos: filtered, active_count: todos.filter(t => !t.completed).length });\n }\n});\n\napp.post('/todos', (req, res) => {\n const todo = { id: crypto.randomUUID(), text: req.body.text, completed: false };\n todos.push(todo);\n res.setHeader('HX-Trigger', 'todoUpdated');\n res.render('partials/todo-item.html', { todo });\n});\n\napp.patch('/todos/:id/toggle', (req, res) => {\n const todo = todos.find(t => t.id === req.params.id);\n if (todo) {\n todo.completed = !todo.completed;\n res.setHeader('HX-Trigger', 'todoUpdated');\n res.render('partials/todo-item.html', { todo });\n }\n});\n\napp.delete('/todos/:id', (req, res) => {\n todos = todos.filter(t => t.id !== req.params.id);\n res.setHeader('HX-Trigger', 'todoUpdated');\n res.send('');\n});\n\napp.get('/todos/stats', (req, res) => {\n res.send(`${todos.filter(t => !t.completed).length} items left`);\n});\n\napp.listen(3000);\n```\n\n## Best Practices\n\n1. **Hypermedia**: Return HTML, not JSON\n2. **HX-Trigger**: Cross-component updates\n3. **Partials**: Reusable HTML fragments\n4. **Progressive Enhancement**: Works without JS\n5. **OOB Swaps**: Multi-element updates\n6. **History**: hx-push-url for navigation\n\nGoogle Antigravity's Gemini 3 understands HTMX patterns and generates hypermedia apps.","author":{"@type":"Person","name":"Antigravity Team"},"dateCreated":"2026-01-03T23:55:09.029973+00:00","keywords":"HTMX, Hypermedia, SSR, JavaScript, Web","programmingLanguage":"Antigravity AI Prompt","codeRepository":"https://antigravityai.directory"}
    Antigravity AI Directory
    PromptsMCPBest PracticesUse CasesLearn
    Home
    Prompts
    HTMX Server-Driven UI Patterns

    HTMX Server-Driven UI Patterns

    Build dynamic web apps with HTMX and hypermedia exchanges in Google Antigravity

    HTMXHypermediaSSRJavaScriptWeb
    by Antigravity Team
    ⭐0Stars
    šŸ‘ļø1Views
    .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

    1. Copy the prompt - Click the copy button above to copy the entire prompt to your clipboard
    2. Paste into your AI assistant - Use with Claude, ChatGPT, Cursor, or any AI coding tool
    3. Customize as needed - Adjust the prompt based on your specific requirements
    4. 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...