Astro Cheat Sheet

Quick reference for Astro — components, routing, content collections, islands architecture, integrations, and deployment. All essential Astro patterns in one page.

CLI Commands Component Syntax (.astro) Routing Content Collections Islands Architecture API Endpoints & SSR

CLI Commands

npm create astro@latest Create new Astro project
npx astro dev Start dev server
npx astro build Build for production
npx astro preview Preview production build
npx astro add react Add React integration
npx astro add tailwind Add Tailwind CSS
npx astro add node Add Node.js SSR adapter
npx astro add cloudflare Add Cloudflare adapter

Component Syntax (.astro)

---\nconst name = "World"\n---\n

Hello {name}

 Basic component with frontmatter
{expression} Dynamic expression in template
{list.map(item =>
  • {item}
    • )}    		 Loop / map over array
    {show &&

    Visible

    }    		 Conditional rendering
    Pass props to component
    Default slot (children)
    Named slot
    Astro.props Access component props in frontmatter
    Scoped styles (default)
    Global styles

    Routing

    src/pages/index.astro → / (home page)
    src/pages/about.astro → /about
    src/pages/blog/[slug].astro → /blog/:slug (dynamic route)
    src/pages/blog/[...slug].astro → /blog/* (rest/catch-all route)
    src/pages/api/data.ts → /api/data (API endpoint)
    export function getStaticPaths() Generate paths for dynamic routes (SSG)
    Astro.params.slug Access route params
    Astro.url.searchParams Access query parameters
    Astro.redirect("/new-page") Server-side redirect

    Content Collections

    src/content/blog/*.md Content stored as Markdown files
    src/content/config.ts Define collection schemas
    defineCollection({ schema: z.object({...}) }) Schema with Zod validation
    const posts = await getCollection("blog") Get all entries in collection
    const post = await getEntry("blog", "my-post") Get single entry by slug
    const { Content } = await entry.render() Render Markdown to component
    entry.data.title Access frontmatter data (typed)
    entry.slug Access computed slug

    Islands Architecture

    Hydrate immediately on page load
    Hydrate when browser is idle
    Hydrate when scrolled into view
    Hydrate on media query match
    Client-only (skip SSR)
    No client:* directive Renders as static HTML (zero JS)
    Client-side script (bundled)
    Inline script (not bundled)

    API Endpoints & SSR

    export const GET: APIRoute = ({ params }) => { ... } GET endpoint handler
    export const POST: APIRoute = async ({ request }) => { ... } POST endpoint handler
    return new Response(JSON.stringify(data), { status: 200 }) Return JSON response
    // astro.config.mjs: output: "server" Enable SSR mode
    // astro.config.mjs: output: "hybrid" Hybrid — static default, opt-in SSR
    export const prerender = false Opt-in to SSR for specific page (hybrid)
    export const prerender = true Opt-in to SSG for specific page (server)
    Astro.cookies.get("name") Read cookie (SSR only)
    Step-by-Step Guide

    How to Build a CSS Grid Layout

    Read Guide →

    More Cheat Sheets

    Regex Cheat Sheet Git Cheat Sheet Markdown Cheat Sheet HTTP Status Codes Cheat Sheet