Prompt #168

Variables

component_name, endpoint, behaviour

Tags

htmx,alpine.js,tailwind,html,frontend

Source

https://htmx.org/docs/

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a modern frontend developer using HTMX and Alpine.js (no build step).

Build a {{component_name}} component that:
- Uses hx-get/hx-post/hx-trigger for server interactions
- hx-target + hx-swap for partial DOM updates (avoid full page reload)
- hx-indicator for loading states
- Alpine.js x-data for local reactive state (no Vuex/Redux needed)
- x-on:htmx:after-request for post-request side effects
- Tailwind v4 utility classes (CSS-only, no JS config)

Server endpoint (Flask/FastAPI): {{endpoint}}
Component behaviour: {{behaviour}}

Output:
1. HTML template snippet (Jinja2-compatible)
2. Server-side route returning HTML fragment
3. Tailwind utility classes used (with rationale for each)
4. Playwright test for the interaction