Common mistakes

{* wrong: all three render nothing *}
<p>${ Math.max(a, b) }</p>
<p>${ String(count) }</p>
<p>${ items.length } items</p>

{* right *}
<p>${ a > b ? a : b }</p>
<p>${ count }</p>
{each item in items}
  <p>${ loop.count } items</p>
{/each}

{* wrong: Card renders with an empty product *}
{each p in products}
  <Card />
{/each}

{* right *}
{each p in products}
  <Card product={p} />
{/each}

{* wrong: emits :href="`/p/`" *}
<template x-for="p in products">
  <a :href="`/p/${p.slug}`">View</a>
</template>

{* right *}
<template x-for="p in products">
  <a :href="'/p/' + p.slug">View</a>
</template>

{* wrong: emits the script tag, then nothing *}
{$let count = 0}
<p>${ count }</p>

<div data-slurp-component="Card" data-slurp-props="{&quot;title&quot;:&quot;Ann&quot;}"></div>

<!-- layout:@layouts/base --><slot></slot><p>your page content</p><!-- /layout:@layouts/base -->

{* wrong: title arrives as the literal characters "Hi ${name}" *}
<Card title="Hi ${name}" />

{* wrong: product is the seven-character string "product" *}
<Product product="product" />

{* right *}
<Card title={`Hi ${name}`} />
<Product product={product} />

{* wrong: UnsafeScriptInterpolation, at build time *}
<script>var n = ${ user.name };</script>

{* right: | json for a bare value that needs its own delimiters *}
<script>var n = ${ user.name | json };</script>

{* right: | js for a value inside a string literal you wrote *}
<script>var m = "${ user.name | js }";</script>

{* wrong: UnsafeScriptInterpolation *}
<button @click="add(${ id | js })">Add</button>

{* right: a bare JSON value *}
<button @click="add(${ id | json })">Add</button>

{* also right: quote the slot, so the claim is true *}
<button @click="add('${ id | js }')">Add</button>

{* wrong *}
<div title="${ a["k"] }">t</div>

<div title=" a[" k>t</div>

{* the brace form is not quote-delimited *}
<div title={ a["k"] }>t</div>

{* or use single quotes inside the expression *}
<div title="${ a['k'] }">t</div>

{* wrong: renders Number-less code that throws in the browser *}
<script>var t = ${ record.amount | json }.toFixed(2);</script>

{* right *}
<script>var t = Number(${ record.amount | json }).toFixed(2);</script>

{* wrong: renders 1700000000000 *}
${ 1700000000000 | date("MMM DD, YYYY") }

{* right: renders Aug 03, 2026 *}
${ "2026-08-03T10:00:00Z" | date("MMM DD, YYYY") }

{* wrong: with cur = "EUR", renders " 49.99" - a leading space, no symbol *}
${ price | currency(cur) }

{* right: renders €49,99 *}
${ price | currency("EUR") }

{* wrong: stock_string is "10", so this is FALSE *}
{if product.stock_string > 0}In stock{/if}

{* right *}
{if (product.stock_string | int) > 0}In stock{/if}

{* wrong *}
{match status}
  {case "paid"}Paid{/case}
{/match}

{* right *}
{match status}
  "paid" -> Paid
  _      -> Other
{/match}

{* wrong: silently ignored, the page renders with no layout *}
---
layout "@layouts/base"
---
<h1>Hi</h1>

{* right *}
<layout src="@layouts/base">
  <h1>Hi</h1>
</layout>