ConfigsApr 7, 2026·2 min read

Astro — Content-First Web Framework for Speed

Web framework that ships zero JavaScript by default. Build blazing-fast content sites with any UI framework. Islands architecture for selective interactivity. Perfect for docs and blogs. 50,000+ 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 my-site
cd my-site && npm run dev
---
// src/pages/index.astro
const title = "My Site";
const posts = await fetch("https://api.example.com/posts").then(r => r.json());
---

<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
    {posts.map(p => <article><h2>{p.title}</h2><p>{p.body}</p></article>)}
  </body>
</html>

Zero JavaScript shipped to the browser. Static HTML by default.

Intro

Astro is a web framework that ships zero JavaScript to the browser by default with 50,000+ GitHub stars. It renders everything to static HTML at build time, resulting in the fastest possible page loads. When you need interactivity, use Islands architecture to hydrate only specific components with React, Vue, Svelte, or any framework. Perfect for content-heavy sites like docs, blogs, marketing pages, and portfolios. Best for developers who want maximum performance for content-first websites. Works with: React, Vue, Svelte, Solid, Preact. Setup time: under 2 minutes.

Key Concepts

Zero JS by Default

<!-- This page ships 0KB of JavaScript -->
<h1>Hello, World!</h1>
<p>This is pure HTML. No framework runtime.</p>

Islands Architecture

Add interactivity only where needed:

---
import StaticHeader from "./Header.astro";    // No JS
import ReactCounter from "./Counter.jsx";      // Interactive
---

<StaticHeader />                               <!-- Pure HTML -->
<ReactCounter client:visible />                 <!-- Hydrates when visible -->

Hydration directives:

Directive When
client:load Immediately on page load
client:idle When browser is idle
client:visible When component scrolls into view
client:media When media query matches

Content Collections

Type-safe content management for Markdown/MDX:

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});
---
const posts = await getCollection("blog");
---
{posts.map(post => <BlogCard post={post} />)}

Use Any Framework

Mix frameworks in one project:

---
import ReactWidget from "./Widget.jsx";
import VueChart from "./Chart.vue";
import SvelteForm from "./Form.svelte";
---

<ReactWidget client:load />
<VueChart client:visible />
<SvelteForm client:idle />

Performance

Metric Astro Next.js Gatsby
JS shipped (blog) 0KB 80KB+ 200KB+
Lighthouse score 100 85-95 80-90
Build time (1K pages) 8s 25s 45s

Key Stats

  • 50,000+ GitHub stars
  • Zero JS default
  • Islands architecture
  • React, Vue, Svelte, Solid support
  • 100 Lighthouse score typical

FAQ

Q: What is Astro? A: A web framework that ships zero JavaScript by default, using Islands architecture for selective interactivity. Best for content-first sites.

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

Q: Can I use Astro with React? A: Yes, Astro supports React, Vue, Svelte, Solid, and Preact — even mixed in the same project.

🙏

Source & Thanks

Created by Astro. Licensed under MIT.

astro — stars 50,000+

Thanks to the Astro team for making the web fast again.

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

tldraw — Infinite Canvas SDK for AI Applications

Open-source infinite canvas library for building whiteboard, diagramming, and design applications. React component with real-time collaboration. Used by AI tools for visual generation. 40,000+ stars.

AI Open Source
◈Home🔍Search👤Me