Astro Examples
A playground of demos showing why Astro is the framework for content-driven sites that still need sprinkles of interactivity.
Each example is a self-contained route. View the source on GitHub to see how little code it takes.
-
Island Party
Three frameworks, one page, zero default JS
React, Svelte, and Vue components coexist on a single page. Each island hydrates only when needed — Astro ships static HTML for everything else.
- Islands architecture
- client:load / visible / idle
- Framework mixing
-
Time Warp
Server time vs. client time
See the difference between a timestamp baked in at request time and a live clock that only runs in the browser.
- Server-side rendering
- Selective hydration
- Zero-JS fallback
-
Cosmic Transitions
Morph between pages like magic
Astro View Transitions animate shared elements across routes. Click a cosmic body and watch it glide into its detail view.
- View Transitions API
- transition:name
- ClientRouter
-
API Playground
Endpoints you can poke
Hit Astro API routes from the browser and watch JSON flow back. No backend framework required — just endpoints in your pages directory.
- API routes
- fetch from islands
- Dynamic responses
-
Component Orchestra
Slots, props, and nested Astro components
Pure Astro components compose like LEGO. Props flow down, slots flow up, and nothing ships JavaScript unless you ask for it.
- Slots & props
- Scoped CSS
- Static by default