Common Ai Hallucinations
Live Demos HubCommon Ai Hallucinations
Interactive production-grade hypermedia component for HTMXUI.
Interactive Preview
Common AI Hallucinations & Gotchas
The top 10 pitfalls AI coders and LLMs encounter when generating HTMXUI code, and how to write them correctly.
❌ Mistake 1: Using JSX syntax ({variable}) inside HTML
LLMs trained on React often insert {count} into HTML text.
Bad: <span>{count}</span>
Good: <span hx-text="count">0</span>
Good: <span hx-text="count">0</span>
❌ Mistake 2: Escaping JSON quotes inside hx-state attributes
Writing complex nested JSON inside hx-state='{...}' leads to quote escaping errors.
Bad: <div hx-state='{"user": {"name": "John"}}'>
Good: <div><script type="application/json" hx-state>{"user": {"name": "John"}}</script>...</div>
Good: <div><script type="application/json" hx-state>{"user": {"name": "John"}}</script>...</div>
❌ Mistake 3: Using v-for or v-if attributes on regular div tags
Vue's v-for and v-if are not recognized. HTMXUI uses standard HTML <template> tags.
Bad: <div hx-for="item in items">...</div>
Good: <template hx-for="(item, idx) in items"><div hx-text="item.name"></div></template>
Good: <template hx-for="(item, idx) in items"><div hx-text="item.name"></div></template>
❌ Mistake 4: Forgetting .number modifier on numeric inputs
Without .number, input values remain strings ("5" + 1 = "51").
Bad: <input type="number" hx-model="qty">
Good: <input type="number" hx-model.number="qty">
Good: <input type="number" hx-model.number="qty">
HTML Source
<div class="space-y-10 max-w-4xl py-6">
<!-- Title & Subtitle -->
<div class="space-y-3">
<h1 class="text-4xl font-extrabold tracking-tight text-foreground">Common AI Hallucinations & Gotchas</h1>
<p class="text-lg text-muted-foreground leading-relaxed font-medium">
The top 10 pitfalls AI coders and LLMs encounter when generating HTMXUI code, and how to write them correctly.
</p>
</div>
<div class="space-y-6">
<!-- Item 1 -->
<div class="p-5 rounded-xl border border-border bg-card shadow-sm space-y-2">
<div class="font-semibold text-sm text-foreground flex items-center gap-2">
<span class="text-destructive font-mono">❌ Mistake 1:</span> Using JSX syntax ({variable}) inside HTML
</div>
<p class="text-xs text-muted-foreground">LLMs trained on React often insert <code class="bg-muted px-1 rounded text-xs">{count}</code> into HTML text.</p>
<div class="p-3 bg-muted/50 rounded font-mono text-xs text-foreground">
<span class="text-destructive">Bad:</span> <span>{count}</span><br>
<span class="text-emerald-500 font-bold">Good:</span> <span hx-text="count">0</span>
</div>
</div>
<!-- Item 2 -->
<div class="p-5 rounded-xl border border-border bg-card shadow-sm space-y-2">
<div class="font-semibold text-sm text-foreground flex items-center gap-2">
<span class="text-destructive font-mono">❌ Mistake 2:</span> Escaping JSON quotes inside hx-state attributes
</div>
<p class="text-xs text-muted-foreground">Writing complex nested JSON inside <code class="bg-muted px-1 rounded text-xs">hx-state='{...}'</code> leads to quote escaping errors.</p>
<div class="p-3 bg-muted/50 rounded font-mono text-xs text-foreground">
<span class="text-destructive">Bad:</span> <div hx-state='{"user": {"name": "John"}}'><br>
<span class="text-emerald-500 font-bold">Good:</span> <div><script type="application/json" hx-state>{"user": {"name": "John"}}</script>...</div>
</div>
</div>
<!-- Item 3 -->
<div class="p-5 rounded-xl border border-border bg-card shadow-sm space-y-2">
<div class="font-semibold text-sm text-foreground flex items-center gap-2">
<span class="text-destructive font-mono">❌ Mistake 3:</span> Using v-for or v-if attributes on regular div tags
</div>
<p class="text-xs text-muted-foreground">Vue's <code class="bg-muted px-1 rounded text-xs">v-for</code> and <code class="bg-muted px-1 rounded text-xs">v-if</code> are not recognized. HTMXUI uses standard HTML <code class="bg-muted px-1 rounded text-xs"><template></code> tags.</p>
<div class="p-3 bg-muted/50 rounded font-mono text-xs text-foreground">
<span class="text-destructive">Bad:</span> <div hx-for="item in items">...</div><br>
<span class="text-emerald-500 font-bold">Good:</span> <template hx-for="(item, idx) in items"><div hx-text="item.name"></div></template>
</div>
</div>
<!-- Item 4 -->
<div class="p-5 rounded-xl border border-border bg-card shadow-sm space-y-2">
<div class="font-semibold text-sm text-foreground flex items-center gap-2">
<span class="text-destructive font-mono">❌ Mistake 4:</span> Forgetting .number modifier on numeric inputs
</div>
<p class="text-xs text-muted-foreground">Without <code class="bg-muted px-1 rounded text-xs">.number</code>, input values remain strings ("5" + 1 = "51").</p>
<div class="p-3 bg-muted/50 rounded font-mono text-xs text-foreground">
<span class="text-destructive">Bad:</span> <input type="number" hx-model="qty"><br>
<span class="text-emerald-500 font-bold">Good:</span> <input type="number" hx-model.number="qty">
</div>
</div>
</div>
</div>