KnowledgeApr 3, 2026·2 min read

Astro — Web Framework for Content-Driven Sites

Ship zero-JS by default. Island architecture for fast content sites, docs, and blogs. Supports React, Vue, Svelte. 58K+ stars.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm create astro@latest
cd my-site
npm run dev

Open http://localhost:4321 — your site is live.

---
// src/pages/index.astro
const title = "My AI Tool";
---
<html>
<head><title>{title}</title></head>
<body>
    <h1>{title}</h1>
    <p>Zero JavaScript shipped to the browser by default.</p>
</body>
</html>

Add interactive components only where needed:

---
import ChatWidget from '../components/ChatWidget.jsx';
---
<h1>Documentation</h1>
<p>This is static HTML. No JS.</p>

<!-- Only this component ships JavaScript -->
<ChatWidget client:visible />
Intro

Astro is a web framework with 58,100+ GitHub stars for building fast, content-driven websites. Its key innovation is zero JavaScript by default — pages ship as pure HTML unless you explicitly opt into interactivity with "islands." This makes Astro sites blazingly fast (perfect Lighthouse scores) while still supporting React, Vue, Svelte, or any UI framework for interactive components. Astro powers documentation sites, blogs, marketing pages, and AI tool landing pages where performance and SEO matter most.

Works with: React, Vue, Svelte, Solid, Preact, Lit, any UI framework, Tailwind, MDX, Markdown. Best for content sites, documentation, blogs, and AI product landing pages. Setup time: under 2 minutes.

Astro Architecture

Island Architecture

Traditional SPA:        Astro Islands:
┌────────────────┐    ┌────────────────┐
│ ALL JavaScript  │    │ Static HTML    │
│ (200KB+)        │    │ (0KB JS)       │
│                 │    │   ┌────────┐  │
│                 │    │   │ Island │  │
│                 │    │   │ (5KB)  │  │
│                 │    │   └────────┘  │
└────────────────┘    └────────────────┘

Only interactive components ("islands") ship JavaScript. Everything else is static HTML.

Content Collections

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const docs = defineCollection({
    schema: z.object({
        title: z.string(),
        description: z.string(),
        category: z.enum(['guides', 'api', 'tutorials']),
    }),
});

export const collections = { docs };
<!-- src/content/docs/getting-started.md -->
---
title: Getting Started
description: Quick start guide for our AI tool
category: guides
---

# Getting Started
Install with: `pip install our-tool`

Multi-Framework Support

---
import ReactChart from '../components/Chart.jsx';
import VueForm from '../components/Form.vue';
import SvelteToggle from '../components/Toggle.svelte';
---

<!-- Mix frameworks on the same page -->
<ReactChart client:visible data={chartData} />
<VueForm client:load />
<SvelteToggle client:idle />

Hydration directives:

  • client:load — Hydrate immediately
  • client:visible — Hydrate when scrolled into view
  • client:idle — Hydrate when browser is idle
  • client:media — Hydrate on media query match

Performance

  • 100/100 Lighthouse score out of the box
  • Zero JS by default
  • Automatic image optimization
  • Built-in RSS feed generation
  • Sitemap generation

FAQ

Q: What is Astro? A: Astro is a web framework with 58,100+ GitHub stars that ships zero JavaScript by default using island architecture. Supports React, Vue, Svelte for interactive parts. Perfect for content sites, docs, and blogs.

Q: When should I use Astro vs Next.js? A: Use Astro for content-driven sites (docs, blogs, landing pages) where SEO and speed matter. Use Next.js for interactive web apps (dashboards, SaaS). Astro ships less JS; Next.js has better app-like features.

Q: Is Astro free? A: Yes, open-source under MIT license.

🙏

Source & Thanks

Created by Astro. Licensed under MIT.

astro — ⭐ 58,100+

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.
◈Home🔍Search👤Me