astro

Use when working with Astro for content-focused websites, islands architecture, content collections, view transitions, or hybrid SSR/SSG rendering. Also use when integrating React/Vue/Svelte components into Astro or configuring Astro DB.

Model	Source
sonnet	pack: frontend

Full Reference

┏━ 🔧 astro ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when working with Astro for content-focuse… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Astro

Astro (v5.x, as of February 2026) is a web framework for content-focused sites. Renders HTML at build time by default; ships zero JS unless you opt in per-component.

Item	Value
Current Version	5.x (Vite 6 under the hood)
Install	`npm create astro@latest`
Config file	`astro.config.mjs`
Content config	`src/content.config.ts` (moved from `src/content/config.ts` in v5)
Dev server	`npx astro dev`
Build	`npx astro build`
Docs	https://docs.astro.build

Reference Index

I want to…	File
Writing components, props, slots, frontmatter	`reference/components.md`
Content collections, loaders, schemas	`reference/content-collections.md`
Client directives, islands, server islands	`reference/islands.md`
File-based routing, dynamic pages, API routes	`reference/routing.md`
View transitions, ClientRouter, persistence	`reference/view-transitions.md`
SSR, SSG, adapters, integrations	`reference/rendering.md`
Astro DB, tables, seeds, queries	`reference/db.md`
Astro Actions, form handling, server functions	`reference/actions.md`
Image optimization, astro:assets, remote images	`reference/images.md`
Environment variables, astro:env, envField	`reference/env.md`
v4 → v5 migration, breaking changes	`reference/migration-v4-v5.md`

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.

Load only the reference docs relevant to the current task. Don’t ingest all 11 files for a single question.

Astro 5 Breaking Changes (Quick Reference)

Change	v4	v5
Content config location	`src/content/config.ts`	`src/content.config.ts`
Collection entry ID field	`slug`	`id`
Render method	`entry.render()`	`import { render } from 'astro:content'`
View Transitions component	`<ViewTransitions />`	`<ClientRouter />`
Hybrid output mode	`output: 'hybrid'`	Removed — static is default
`Astro.glob()`	Available	Deprecated → use `getCollection()`
Script hoisting	Auto-hoisted to `<head>`	No longer auto-hoisted
Squoosh image service	Available	Removed → use Sharp
`compiledContent()`	Sync	Now async (`await entry.compiledContent()`)