/explore · the binder
Every idea from the curriculum, with the smallest example that fits. Search, filter, jump straight to the lesson when you want depth.
tip: press ⌘K from anywhere to fuzzy-find a concept · cards with ▶ open a live editor
Every file in src/pages/ becomes a route. No router config.
src/pages/about.astro
<h1>About</h1>
<p>I'm building in space.</p>JavaScript at the top of an .astro file. Runs on the server.
---
const name = "Mae";
const missions = ["Endeavour", "Apollo 42"];
---
<h1>{name}</h1>Embed any JavaScript expression in the template with curly braces.
<p>2 + 2 = {2 + 2}</p>
<p>upper: {name.toUpperCase()}</p>
<p>length: {crew.length}</p>Styles in an .astro file are auto-scoped to that component. No leaks.
<h1>Hello</h1>
<style>
h1 { color: crimson; }
</style>Any .astro file outside src/pages/ is a reusable component.
<!-- src/components/Card.astro -->
<article class="card">
<slot />
</article>Pass values to a component, destructure them in its frontmatter.
---
const { name, mission } = Astro.props;
---
<h1>{name}</h1>
<p>{mission}</p>A hole for children. Layouts and wrappers fill it from outside.
<!-- Layout.astro -->
<html>
<body>
<main>
<slot />
</main>
</body>
</html>Forward an object as props with the JSX spread operator.
{ crew.map(a => <Card {...a} />) }Group elements without adding a wrapper tag. Required for named slots.
<Layout>
<Fragment slot="pinboard">
<Sticky />
<Polaroid />
</Fragment>
</Layout>The file's path is the URL. No router config, no boilerplate.
src/pages/
├── index.astro → /
├── about.astro → /about
└── crew/
└── index.astro → /crewSquare brackets in a filename create a URL placeholder.
src/pages/crew/[name].astro
→ /crew/mae
→ /crew/ovidiu
→ /crew/sergeiTell Astro which dynamic-route pages to generate at build time.
---
export function getStaticPaths() {
return [
{ params: { name: "mae" }, props: { mission: "Endeavour" } },
{ params: { name: "ovidiu" }, props: { mission: "Apollo 42" } },
];
}
---Read the value that filled the [bracket] in the URL.
---
const { name } = Astro.params;
---
<h1>{name}</h1>await fetch at build time. Data lands baked into the HTML.
---
const res = await fetch("/api/crew");
const crew = await res.json();
---
<h1>{crew.length} astronauts on shift</h1>Loop over an array and return components or markup. No v-for, no key spreading.
<ul>
{ crew.map(a => <li>{a.name}</li>) }
</ul>Use && and ternaries to show or hide pieces of the template.
<p>{ status === "orbit" ? "🚀 flying" : "🌍 grounded" }</p>
{ admin && <button>delete</button> }Export GET / POST from src/pages/api/* to return JSON instead of HTML.
// src/pages/api/crew.json.ts
export async function GET() {
return Response.json([
{ name: "Mae", mission: "Endeavour" },
]);
}Import .md files like modules. Get rendered HTML plus typed frontmatter.
---
import { Content, frontmatter } from "../logs/day-one.md";
---
<h1>{frontmatter.title}</h1>
<Content />A typed folder of markdown. Schema, queries, autocomplete — built in.
// content.config.ts
import { defineCollection, z } from "astro:content";
export const collections = {
logs: defineCollection({
schema: z.object({
title: z.string(),
date: z.date(),
}),
}),
};Drop-in tag that resizes, optimizes to webp, and lazy-loads.
---
import { Image } from "astro:assets";
import launch from "../assets/launch.jpg";
---
<Image src={launch} alt="liftoff" width={600} />Hydrate this island as soon as the page loads. Eager. Use sparingly.
<Hype initial={42} client:load />Defer hydration: when in viewport, when browser is idle, or skip SSR entirely.
<Search client:visible /> <!-- when scrolled to -->
<Chat client:idle /> <!-- after first paint -->
<Map client:only="react" /> <!-- never on server -->Page ships as static HTML. Each client:* directive is a small interactive island.
<article>
<h1>Launch day</h1>
<p>Static prose, zero JavaScript.</p>
<Hype client:load /> <!-- this bit ships JS -->
</article>Smooth cross-page animations. One component, browser does the rest.
---
import { ClientRouter } from "astro:transitions";
---
<head>
<ClientRouter />
</head>An adapter tells Astro where it's going to run. One per host.
// astro.config.mjs
import { defineConfig } from "astro/config";
import vercel from "@astrojs/vercel";
export default defineConfig({
adapter: vercel(),
});Pick how each page renders: HTML at build time, or fresh on every request.
// astro.config.mjs
export default defineConfig({
output: "static", // default — pre-render everything
// output: "server", // SSR every route
// output: "hybrid", // static by default, opt-in SSR per page
});Set your canonical URL, then the official integration generates sitemap.xml for free.
// astro.config.mjs
import sitemap from "@astrojs/sitemap";
export default defineConfig({
site: "https://mission-control.vercel.app",
integrations: [sitemap()],
});the binder is quiet here
try a different word, or fewer letters.
27 concepts in the binder.