sitereal
Sign inStart trial

siterealComponents & templates

Build it once. Use it everywhere.

A card on nine pages is one card appearing nine times, not nine copies that drift. Both halves of reuse are real .astro files in your repository.

Start the free trialRead the docs

01Props

A prop is declared once, with a default.

Write {props.title} into a text or an attribute and it becomes a field on every instance. The markup stays the component’s; the words, the picture and the link stay the page’s.

{props.title}{props.body}{props.image}{props.link}

Two ways to write something once.

Component

One definition, live instances

Change it and every page it is on changes with it. It carries its own stylesheet and script, so it travels whole.

  • Typed props, asked for by name
  • Its own rules and its own script
  • Double-click an instance to open it
src/components/<Name>.astro
Template

Everything around the page

The header, the footer and the <main> the page renders inside, with a slot marking exactly where.

  • Assigned by route, collection or as the default
  • Room for a sidebar or a breadcrumb bar
  • Every site starts with Main and 404
<main> · page slot

02Templates

Everything around the page, in one place.

Outside the <main>

The header and the footer are the template’s, and every page it wraps gets them.

Room around the page

A breadcrumb bar above the content or an aside beside it lives inside the <main>, with the page.

The slot is fixed

The page lands here exactly once. The slot and the <main> cannot be deleted or duplicated.

03Assignment

Assigned by route, most specific first.

Auto, Only or Never, per route or per collection, and one template is the default for everything else. A route beats a collection, and a collection beats the default.

Route→Collection→Default

siterealOn disk

Delete sitereal, and they are still components.

A component is an ordinary Astro component with its props declared, and a template is the markup around every page it applies to. Nothing renders only inside the builder.

src/
├─ components/
│  ├─ CallToAction.astro
│  ├─ StepCard.astro
│  └─ FeatureCard.astro
├─ layouts/
│  └─ PlainBase.astro
└─ pages/
   ├─ index.astro
   └─ pricing.astro

Start building the sites you’ve always wanted.

Seven days free, on your machine — and every site you build is real Astro in your own repository, yours from the first save.

Start the free trialRead the docs