Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Astro) expand_more

Components

Astro component Component frontmatter Component props Default props Component slots Named slots HTML attributes Dynamic attributes Conditional rendering List rendering

Pages & Routing

src/pages routing Index page Dynamic route Rest parameters getStaticPaths 404 page Redirects Route priority Endpoint route Trailing slash

Layouts & Content

Layout component Nested layouts Content collections Collection schema getCollection getEntry Render content Markdown pages MDX integration Content images

Styling

Scoped styles Global styles CSS variables Class:list Sass integration Tailwind integration CSS modules Style props External stylesheet Critical CSS

Islands

Static component client:load client:idle client:visible client:media client:only Framework component Hydration boundary Sharing state Nano Stores

Data & Server

Top-level await Fetch at build time Astro.glob migration Astro.request Astro.url Cookies API Server actions Middleware API endpoint Environment variables

Rendering

Static output Server output Adapter configuration Prerender page On-demand rendering Streaming SSR Redirect response Headers Sessions View transitions

Performance & Testing

Image component Picture component Font optimization Prefetch Bundle client JavaScript Accessibility audit Component test End-to-end test Build analysis Deployment adapter

Astro / Islands

Nano Stores

Learn Nano Stores in Astro with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Intermediate

astro-050.astro

astro

import { map } from "nanostores";
export const profile = map({name:"Ava",plan:"Pro"});
profile.setKey("plan","Team");

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Nano Stores Mastery Check →

Top-level await