What Astro Can Do
This page demonstrates Astro's most powerful capabilities — from view transitions and islands to image optimization and type-safe content.
View Transitions Zero Config
Navigate between pages with smooth, native-browser animations. No framework lock-in.
Islands Architecture Client Hydration
Interactive components that hydrate on the client. Everything else stays static HTML.
Zero-Config Image Optimization
Astro automatically converts images to modern formats like WebP and AVIF, generates multiple sizes for responsive images, and adds lazy loading with blur-up placeholders. All at build time — no runtime JavaScript needed.
Islands of Interactivity
Astro ships 100% static HTML by default, then hydrates only the interactive
parts. This page uses client:load to make these tabs interactive
while keeping everything else pure HTML. Result: faster loads, less JS.
Type-Safe Content
Content Collections give you a schema-validated, type-safe API for your Markdown and MDX files. Your editor autocomplete knows every frontmatter field. The build fails if a post is missing a required field.
Serverless API Routes
Files in src/pages/api/ become serverless endpoints. They can
handle form submissions, auth callbacks, or serve dynamic JSON — even on
static builds via adapter deployment to Vercel, Netlify, or Cloudflare.
Build-Time Data Zero JS
Data fetched and computed at build time. The HTML is static — no runtime API calls.
Image Optimization <Image />
Astro's Image component auto-generates responsive, optimized images at build time.
Content Collections Type-Safe
Query your Markdown/MDX with a schema-validated, fully typed API. Autocomplete in your editor.
API Endpoints SSR
Serverless routes for forms, auth, webhooks, and dynamic data. Works on any hosting platform.
src/pages/api/demo.json.ts
This endpoint returns live stats. On static builds it is pre-rendered as JSON.
GET /api/demo.json
posts: 7
words: 12450
readers: 1337
uptime: 99.99%Add an adapter (@astrojs/vercel, @astrojs/netlify, @astrojs/node) to make this endpoint respond to live requests.
Prefetching Hover to Load
Pages start loading before you click. Hover over any link with the prefetch badge.
Scoped Styles Component CSS
Every .astro file's style block is scoped to that component only. No CSS leakage, no naming collisions.
Every component on this page has its own scoped stylesheet. Open DevTools and inspect any element: you will see Astro's automatic data attributes scoping each rule. You can write simple selectors like .card and never worry about it affecting other components.