HTMX

Use Anti-AI UI Framework with HTMX for server-side rendering and hypermedia-driven automation resistance.

Installation

Include HTMX and Anti-AI UI Framework via CDN:

CDN
1.<!-- HTMX -->
2.<script src="https://unpkg.com/htmx.org@1.9.10"></script>
3.

4.<!-- Anti-AI UI Framework -->
5.<script src="https://unpkg.com/anti-ai-ui"></script>

Basic Setup

Initialize Anti-AI UI components after HTMX content loads:

HTMX Integration
1.<script>
2.  const { runawayButton } = window.AntiAiUi;
3.

4.  // Initialize on HTMX afterSwap
5.  document.body.addEventListener('htmx:afterSwap', function(event) {
6.    const container = event.detail.target.querySelector('#button-container');
7.    if (container) {
8.      const button = container.querySelector('button');
9.      runawayButton(button, {
10.        container: container,
11.        evasionDistance: 120
12.      });
13.    }
14.  });
15.</script>

Complete Example

Here's a complete example with HTMX and Anti-AI UI:

Complete Example
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.  <meta charset="UTF-8">
5.  <title>Anti-AI UI + HTMX</title>
6.  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
7.  <script src="https://unpkg.com/anti-ai-ui"></script>
8.  <style>
9.    .button-container {
10.      position: relative;
11.      height: 200px;
12.      border: 1px solid #ccc;
13.      border-radius: 8px;
14.      padding: 20px;
15.    }
16.  </style>
17.</head>
18.<body>
19.  <div id="content" hx-get="/form" hx-trigger="load">
20.    Loading...
21.  </div>
22.

23.  <script>
24.    const { runawayButton } = window.AntiAiUi;
25.

26.    document.body.addEventListener('htmx:afterSwap', function(event) {
27.      const container = document.getElementById('button-container');
28.      if (container) {
29.        const button = container.querySelector('button');
30.        runawayButton(button, {
31.          container: container,
32.          evasionDistance: 120
33.        });
34.      }
35.    });
36.  </script>
37.</body>
38.</html>

Best Practices

  • Use HTMX events: Initialize components in htmx:afterSwap event handlers
  • Container positioning: Ensure containers have position: relative
  • Cleanup: Consider cleanup when content is swapped out

Next Steps