jsschools
Expressions in Templates

Drop Any JavaScript Value Into the HTML

Expressions in Templates

`{ ... }` inside the template runs any JavaScript expression and substitutes its return value into the HTML.

3 min read Level 1/5 #astro#expressions#jsx-like
What you'll learn
  • Interpolate variables and function calls
  • Render conditionally
  • Render arrays as elements

Inside the template, { ... } evaluates any JavaScript expression and drops the result into the HTML. Same shape as JSX.

Variables and Math

---
const name = "Ada";
const year = 2026;
---
<p>Hello {name}, the year is {year + 1}.</p>

Function Calls

---
function format(n: number) { return n.toFixed(2); }
---
<p>${format(9.999)}</p>

Conditionals With &&

{count > 0 && <span class="badge">{count}</span>}

Either/Or With Ternary

<p>{user ? `Welcome, ${user.name}` : "Welcome, stranger"}</p>

Lists With .map()

---
const tags = ["js", "astro", "frontend"];
---
<ul>
  {tags.map(tag => <li>{tag}</li>)}
</ul>

What Doesn’t Work

Statements aren’t allowed inside { ... }. No if, no for. If you need them, compute in the frontmatter:

---
let label = "no";
if (ok) label = "yes";
---
<p>{label}</p>

Astro Falsy-Render Rules

These render as nothing: null, undefined, false, true. Empty strings render as an empty text node. (Same as JSX.)

That’s why {cond && <Thing />} works for “show only when”.

Up Next

Attributes — string, dynamic, and the special class:list.

Attributes →