> ## Documentation Index > Fetch the complete documentation index at: https://aerojs.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Templates > Pages, components, and layouts are all .html templates. Learn the shared syntax and the three roles a template can play. Every `.html` file in Aero is a template. The same syntax — `{ }` expressions, directives, `

About

This is a page.

 ``` ## Components Components are `.html` files in `client/components/`. Import one in a `

Hello, { name }!

``` ```html client/pages/index.html theme={"theme":"github-dark-default"} ``` Include the `.html` extension in import specifiers: `import greeting from '@components/greeting.html'` resolves to `client/components/greeting.html`. ### Props Pass data to a component via attributes. Use `{ }` for dynamic values: ```html theme={"theme":"github-dark-default"} ``` Inside the component, destructure from `Aero.props`: ```html theme={"theme":"github-dark-default"}

{ greeting }, { name }!

``` Spread an object with `props="{ ...obj }"` to pass every key as a separate prop: ```html theme={"theme":"github-dark-default"} ``` Use self-closing syntax (`/>`) when a component has no slot content. Use opening and closing tags to pass children into its ``: ```html theme={"theme":"github-dark-default"}

This fills the card's default slot.

 ``` ## Layouts Layouts are `.html` files in `client/layouts/` that wrap page content. Use `` to mark where the content goes: ```html client/layouts/base.html theme={"theme":"github-dark-default"} My Site
Site header
Site footer
``` ```html client/pages/about.html theme={"theme":"github-dark-default"}

About

This fills the default slot.

 ``` ### Nested layouts A layout can use another layout. Content flows from page to inner layout to outer layout: ```html client/layouts/docs.html theme={"theme":"github-dark-default"}
``` ### Named slots Define named slots with the `name` attribute. Pages target them with `slot`: ```html client/layouts/base.html theme={"theme":"github-dark-default"}
``` ```html client/pages/home.html theme={"theme":"github-dark-default"} Docs

Welcome

 ``` ## Expressions Wrap any JavaScript expression in single braces to interpolate it into text or attributes: ```html theme={"theme":"github-dark-default"}

{ title }

``` Text interpolations are HTML-escaped by default. Use `raw()` for intentional unescaped HTML: ```html theme={"theme":"github-dark-default"}

{ raw(htmlString) }

``` ## Loops Use `for` (or `for`) with a `for…of` expression to repeat an element: ```html theme={"theme":"github-dark-default"}
  • { item }
``` Inside the loop body, Aero provides `index`, `first`, `last`, and `length` as automatic variables. ## Conditionals Use `if`, `else-if`, and `else` as attributes: ```html theme={"theme":"github-dark-default"}
Hello, { user.name }

Not logged in.

``` ## Switch / case Match a value against multiple alternatives: ```html theme={"theme":"github-dark-default"}

Loading…

Ready

Other

``` ## Wrapperless output with `