Astro · Components and layouts

Component skeleton

An .astro file has JavaScript between the --- fences, which runs at build time, and a template below.

---
const title = "Hello, Astro";
const items = ["One", "Two", "Three"];
---
<h1>{title}</h1>
<ul>
  {items.map((item) => <li>{item}</li>)}
</ul>

Official Astro documentation

More components and layouts commands

All components and layouts commands · Astro cheatsheet

Was this page helpful?