Astro Content Collections: The Complete Guide
Astro content collections turn Markdown, MDX, JSON or API data into typed, validated entries. Loaders, Zod schemas, queries and rendering in Astro 7.
Read Article ➔Insights & Documentation
Engineering High-Performance Web Themes
Deep-dives into Astro framework, Content Collections, MDX components, web performance optimization, and theme design.
Featured
Recent Articles
An Accessible Astro Accordion Component
Build an Astro accordion two ways: zero-JS with details and summary, or a button-based version with aria-expanded. Copy-paste code, styles and when to use each.
Astro Breadcrumbs with BreadcrumbList Schema
A copy-paste Astro breadcrumbs component: accessible nav markup, aria-current on the last item, and BreadcrumbList JSON-LD built from the same list of links.
Astro Components: The Complete Guide
Astro components are .astro files that render HTML on the server: frontmatter, props, slots, scoped styles, scripts and islands, with Astro 7 examples.
astro.config.mjs Cheatsheet
An astro.config.mjs cheatsheet for Astro 7: site, base, trailingSlash, output, adapter, build, image, fonts, prefetch, redirects, i18n, env and markdown options.
Astro Content Collections API Cheatsheet
Astro content collections cheatsheet: defineCollection, glob() and file() loaders, Zod schemas, getCollection, getEntry, render, reference and live collections.
A Lightweight Astro Cookie Banner
A small Astro cookie banner that loads analytics only after consent: accept and decline buttons, choice saved in localStorage, and a link to change it later.
Astro Copy Code Button for Every Code Block
Add an Astro copy code button to every Markdown code block with one small script: no plugin, keyboard accessible, with a live status message for screen readers.
A CSS-Only Astro Carousel for Testimonials
Build an Astro carousel with CSS scroll snap: swipeable on touch, keyboard scrollable, and zero JavaScript. Optional prev/next buttons add a few lines of script.
Astro Directives Cheatsheet
All 16 Astro directives on one page: client:* hydration, server:defer, set:html, class:list, define:vars, is:inline, is:global and transition:*.
An Astro FAQ Section with FAQPage Schema
A reusable Astro FAQ component: questions from data, rendered as accessible details elements, with matching FAQPage schema JSON-LD generated from the same array.
The Astro Global: Every Property on One Page
The Astro global object explained: Astro.props, params, url, site, request, cookies, locals, slots, redirect, rewrite, session and more, with what each one returns.
The Astro Glossary: Every Term Explained
An Astro glossary of 50 terms: islands, hydration, adapters, integrations, content collections, loaders, server islands, actions and more.
Choosing a Headless CMS for Astro
How to choose an Astro CMS: when Markdown in Git is enough, Git-based vs API-based CMS options, how loaders connect them, and rebuilding on publish.
Astro Image and Picture Props Cheatsheet
Every Astro image prop on one page: Image and Picture props, layout values, widths, sizes, densities, priority, formats, getImage() and image config options.
An Astro Gallery with a Lightbox
A copy-paste Astro gallery: optimised thumbnails with the Image component, full-size versions from getImage(), and a lightbox on the native dialog element.
Astro Interview Questions for Developers
Astro interview questions with model answers, from basics to advanced: islands, directives, content collections, routing, SSR, performance and debugging.
Accessible Astro Mobile Menu Component
A copy-paste Astro mobile menu: a button with aria-expanded, a nav that hides on small screens, Escape to close, and under 1 KB of JavaScript. No framework needed.
An Astro Modal Built on the dialog Element
Build an Astro modal with the native dialog element: showModal() gives focus trapping, Escape to close and a backdrop for free. Copy-paste component and styles.
Astro Myths That Won't Die
Common Astro myths checked against Astro 7: static only, no interactivity, blogs only, needs React, can't scale. What's actually true now.
Plain Astro or Starlight for Your Docs?
Astro or Starlight for documentation? Starlight gives search, sidebar, i18n and accessible components out of the box; plain Astro suits docs inside a branded site.
A Reusable Astro Pagination Component
An Astro pagination component for paginate(): previous/next links, numbered pages with gaps, aria-current, and rel attributes. Works with any collection.
Astro Performance: Getting to Fast and Staying There
Astro performance guide: optimise images with astro:assets, limit hydration with client directives, prefetch links, self-host fonts and measure Core Web Vitals.
An Astro Pricing Table Component
A data-driven Astro pricing table: plans from a typed array, a highlighted plan, feature lists, an optional monthly/yearly toggle, and Product schema.
30 Astro Questions, Answered
Short, direct answers to 30 common Astro questions: what it is, cost, SEO, React, CMS, hosting, SSR, images, versions and themes, each linking to a deeper guide.
Astro Routing Cheatsheet
Astro routing cheatsheet: file-to-URL patterns, dynamic and rest params, getStaticPaths, paginate, endpoints, redirects, rewrites, 404 pages and route priority.
Astro Routing: Pages, Dynamic Routes and Endpoints
Astro routing is file-based: every file in src/pages becomes a URL. Dynamic routes, getStaticPaths, pagination, endpoints, redirects and i18n in Astro 7.
Astro SEO: The Complete Checklist
Astro SEO checklist with code: set site, build a reusable head component, add a sitemap, robots.txt, canonical URLs, JSON-LD, RSS, and make pages citable by AI.
Astro SSR Cheatsheet: Every Server Feature on One Page
Astro SSR cheatsheet: adapters, output modes, prerender, server islands, actions, middleware, sessions, cookies, endpoints and response headers in one page.
Astro SSR: Server Rendering, When and How
Astro SSR explained: adapters, on-demand pages with prerender = false, server islands, actions, middleware and sessions in Astro 7, and when to stay static.
Styling Astro Sites: Scoped CSS, Tailwind and Tokens
Astro styling options explained: scoped styles, global CSS, Tailwind CSS, design tokens, define:vars, the Fonts API, Sass and flash-free dark mode in Astro 7.
Accessible Astro Tabs Component
Copy-paste Astro tabs following the ARIA tabs pattern: tablist, tab and tabpanel roles, arrow keys, and server-rendered panels that work before JS loads.
Astro Template Syntax Cheatsheet
Astro syntax on one page: frontmatter, expressions, attributes, conditionals, loops, slots, fragments, dynamic tags, comments and how it differs from JSX.
Astro TypeScript Types Cheatsheet
The Astro types you'll use most: Props, HTMLAttributes, Polymorphic, ComponentProps, CollectionEntry, GetStaticPaths, APIRoute, ImageMetadata and App. Locals.
Astro vs Next.js: Which to Choose
Astro vs Next.js: Astro ships less JavaScript and suits content sites; Next.js suits React apps with heavy interactivity. A practical comparison and migration path.
The Best Astro Themes in 2026
The best Astro themes in 2026: free picks like AstroWind, AstroPaper and Starlight, plus paid Komal themes by site type, and what to check before you choose.
Deploying Astro: Every Major Host Compared
How to deploy Astro: run npm run build, publish dist/ to Cloudflare Pages, Netlify, Vercel or GitHub Pages. Settings, adapters, env vars and domains compared.
Astro Image vs Picture vs a Plain img Tag
Astro Image vs Picture vs img: use Image for most local images, Picture when you want AVIF with a WebP fallback, and img for CMS-CDN, SVG or public files.
Astro Island vs Script: Framework Island or Plain Script?
Astro island vs script: use a plain script for toggles, tabs and copy buttons; use a framework island when state is complex, shared or already built in React.
Markdown vs CMS: A Decision Guide for Astro Sites
Markdown vs CMS for an Astro site: who edits, how often, what they preview, and where content lives. A decision flow with a pick for each case.
Starlight Frontmatter Cheatsheet
Every Starlight frontmatter field: title, description, template, hero, banner, sidebar label, order and badge, tableOfContents, prev/next, pagefind, draft and more.
Astro Theme, Starter or Blank Project?
Astro starter, theme or blank project? Choose by how close the result is to what you need, how much you'll change, and whether you're learning or shipping.
Web Performance Glossary for Site Builders
A web performance glossary in plain language: Core Web Vitals, LCP, INP, CLS, TTFB, preload, lazy loading, CDN and cache, with fixes for each.
What Is Astro? The Content-First Web Framework Explained
Astro is a web framework that renders pages to HTML and ships no JavaScript unless a component asks for it. Here's how it works and when to use it.
Static or SSR? Which Rendering Mode Your Astro Page Needs
Astro static or SSR? Answer five questions per page: does content differ per visitor, change faster than a rebuild, or need one dynamic part? Then pick the mode.
Which Client Directive Should I Use in Astro?
Which client directive for an Astro island? None, client:visible, client:idle, client:load, client:media or client:only: a quick decision flow with examples.
Astro CSS Options: Which Styling Approach Fits?
Astro CSS options compared: scoped styles, global CSS, Tailwind CSS, CSS Modules and Sass. A decision guide by team, project and maintenance.