Skip to content

An Astro site, end to end

Project, layout, page, component, and the component on the page — five steps, and the only thing to remember is one keystroke.

Five steps from nothing to a page with your own component on it. You will not write any code, and there is exactly one thing to remember, at the end.

Read this first if you are new. The guides that follow go deeper into each part.

1. Make the project

New Project on the welcome screen. Choose a directory, pick Astro, give it a name.

FEWD scaffolds a real Astro project and installs it, then opens a terminal and starts the dev server for you. The preview loads once it answers.

2. Make a layout

Layouts tab in the project panel → + → a name like Base.

You get a complete document — <html>, <head>, a <title> driven by a prop, and a <slot /> where each page’s content will go:

---
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

That is the frame every page sits inside. Most sites need one; some need a second for a different shape of page.

3. Make a page

Pages tab → + → a name like about → choose your layout from the dropdown beneath.

That last part matters. Picking the layout writes the import, wraps the markup in it, and passes the props the layout actually asks for:

---
import Base from '../layouts/Base.astro';
---

<Base title="about">
  <section>
    <h1>about</h1>
  </section>
</Base>

That is a working page. Open it and the preview shows it with the layout’s head, styles and everything else already around it.

Leave the dropdown on No layout and you get the markup with nothing around it — useful if your project wraps pages some other way, and not what you want otherwise.

4. Build a component

Components tab → Build Visually.

This opens a blank component in Creative Mode, which is the visual half of FEWD: the structure tree, the element toolbar, the styling panel and a live preview. Drag elements onto the page, style them, write the real wording.

Two things worth doing while you are there:

  • Right-click the outer section → Auto-BEM children. Every unnamed element gets the class it should have, all at once.
  • Turn wording into props. Write the real copy first, then Convert to prop in the Inspector. It keeps your wording as the demo content, so the preview still reads properly, and that wording becomes the prop’s default.

Then Convert to Component. A dialog shows the props it found, the files it will write and anything it thinks is off, before anything is written.

Building a component covers this properly.

5. Put the component on the page

This is the one step that happens in the code pane, and it is one keystroke.

Open your page. In the markup, type < and the first letter of your component:

<H

Hero appears in the list. Press Enter.

Two things happen at once: <Hero /> is written where your cursor is, and the import is added to the frontmatter for you — with the right relative path, worked out from where the page actually sits.

---
import Base from '../layouts/Base.astro';
import Hero from '../components/Hero.astro';
---

<Base title="about">
  <Hero />
</Base>

You did not type either path.

The keystroke is the whole trick

It is worth saying again, because it is the only thing in this guide you have to remember, and it does more than it looks like it does.

Type < and a capital letter. FEWD walks your project for components — .astro, .tsx, .jsx, .vue — and offers every one whose name starts that way, whether or not it has ever been imported into this page.

It writes the import. A component you have never used in this file arrives fully wired.

Then it offers that component’s props. Put the cursor inside the tag and start typing, and the names come from the component’s own Props interface — the one the creator generated when you converted it:

<Hero heading="" subheading="" />
      ↑ offered, because Hero declares them

So the visual half and the typed half meet here: what you named in the creator is what is offered back when you use it.

What this means in practice

Add a component, and every page that could use it already knows about it. Change its props, and the pages offering them follow. Nothing is registered anywhere, because the files are the registry — the same reason a prop is found rather than declared.

Where to go next