astro
The web framework for content-driven websites. ⭐️ Star to support our work!
Top Related Projects
The React Framework
The best React-based framework with performance, scalability and security built in.
Vite & Vue powered static site generator.
The Intuitive Vue Framework.
Easy to maintain open source documentation websites.
A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
Quick Overview
Astro is a modern static site generator and web framework that allows developers to build fast, content-focused websites. It leverages a component-based architecture and supports multiple frontend frameworks, enabling developers to use their preferred tools while optimizing for performance.
Pros
- Excellent performance due to its static-first approach and minimal JavaScript output
- Flexible component system that supports multiple frontend frameworks (React, Vue, Svelte, etc.)
- Built-in optimizations for images, assets, and CSS
- Intuitive and easy-to-learn API for both beginners and experienced developers
Cons
- Limited dynamic functionality compared to full-stack frameworks
- Steeper learning curve for developers new to static site generators or component-based architectures
- Smaller ecosystem and community compared to more established frameworks
- Some advanced features may require additional configuration or plugins
Code Examples
- Creating a basic Astro component:
---
const { title } = Astro.props;
---
<h1>{title}</h1>
<slot />
- Fetching data in an Astro page:
---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---
<ul>
{data.map(item => <li>{item.name}</li>)}
</ul>
- Using a React component in Astro:
---
import ReactComponent from './ReactComponent.jsx';
---
<ReactComponent client:load />
Getting Started
To create a new Astro project, run the following commands:
# Create a new project
npm create astro@latest
# Navigate to the project directory
cd my-astro-project
# Install dependencies
npm install
# Start the development server
npm run dev
This will set up a basic Astro project and start a development server. You can now begin creating pages in the src/pages directory and components in the src/components directory.
Competitor Comparisons
The React Framework
Pros of Next.js
- Robust server-side rendering and static site generation capabilities
- Extensive ecosystem and community support
- Seamless integration with Vercel's deployment platform
Cons of Next.js
- Steeper learning curve for developers new to React
- More opinionated framework structure, which may limit flexibility
- Larger bundle sizes compared to more lightweight alternatives
Code Comparison
Next.js:
// pages/index.js
export default function Home() {
return <h1>Welcome to Next.js!</h1>
}
Astro:
---
// src/pages/index.astro
---
<html>
<body>
<h1>Welcome to Astro!</h1>
</body>
</html>
Key Differences
- Astro focuses on static site generation with partial hydration, while Next.js offers a full-featured React framework
- Astro supports multiple frontend frameworks, whereas Next.js is React-centric
- Next.js provides more built-in features for complex applications, while Astro aims for simplicity and performance
Use Cases
- Choose Next.js for large-scale, dynamic web applications with complex state management
- Opt for Astro when building content-heavy websites or static sites with minimal JavaScript requirements
The best React-based framework with performance, scalability and security built in.
Pros of Gatsby
- Mature ecosystem with a wide range of plugins and integrations
- Strong GraphQL integration for efficient data handling
- Extensive documentation and community support
Cons of Gatsby
- Steeper learning curve, especially for developers new to GraphQL
- Slower build times for large sites compared to Astro
- More complex configuration and setup process
Code Comparison
Gatsby (React-based):
import React from "react"
import { graphql } from "gatsby"
export default function HomePage({ data }) {
return <h1>{data.site.siteMetadata.title}</h1>
}
export const query = graphql`
query HomePageQuery {
site {
siteMetadata {
title
}
}
}
`
Astro:
---
const title = "My Astro Site";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
</body>
</html>
Gatsby uses React components and GraphQL queries, while Astro employs a more straightforward approach with its own component syntax and frontmatter for data. Astro's simplicity can lead to faster development and build times, especially for smaller projects. However, Gatsby's robust ecosystem and GraphQL integration can be advantageous for larger, data-intensive applications.
Vite & Vue powered static site generator.
Pros of VitePress
- Tightly integrated with Vue.js ecosystem, offering seamless Vue component usage
- Lightweight and fast, with minimal configuration required
- Built-in search functionality out of the box
Cons of VitePress
- Limited to Vue.js, less flexible for other frameworks or vanilla JavaScript
- Fewer built-in features compared to Astro's extensive integrations
- Smaller community and ecosystem than Astro
Code Comparison
VitePress:
<script setup>
import { useData } from 'vitepress'
const { page } = useData()
</script>
<template>
<h1>{{ page.title }}</h1>
</template>
Astro:
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
Key Differences
- Astro supports multiple frameworks (React, Vue, Svelte, etc.), while VitePress is Vue-specific
- Astro offers partial hydration for improved performance, VitePress relies on Vue's hydration
- Astro has a more extensive plugin system and integration options
- VitePress is primarily focused on documentation sites, while Astro is more versatile for various web projects
Both tools excel in their respective domains, with VitePress being ideal for Vue-based documentation and Astro offering greater flexibility for diverse web development needs.
The Intuitive Vue Framework.
Pros of Nuxt
- Built on Vue.js, offering a familiar ecosystem for Vue developers
- Robust server-side rendering capabilities out of the box
- Extensive plugin ecosystem and community support
Cons of Nuxt
- Larger bundle size compared to Astro's minimal output
- Steeper learning curve for developers new to Vue.js
- Less flexibility in choosing rendering strategies per component
Code Comparison
Nuxt component:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello, Nuxt!',
content: 'Welcome to my Nuxt.js site.'
}
}
}
</script>
Astro component:
---
const title = 'Hello, Astro!';
const content = 'Welcome to my Astro site.';
---
<div>
<h1>{title}</h1>
<p>{content}</p>
</div>
Both Nuxt and Astro offer powerful frameworks for building modern web applications. Nuxt excels in the Vue.js ecosystem with strong server-side rendering capabilities, while Astro provides a more flexible and lightweight approach to static site generation with its multi-framework support and partial hydration features.
Easy to maintain open source documentation websites.
Pros of Docusaurus
- Built-in search functionality
- Extensive documentation and large community support
- Easier to set up and configure for non-technical users
Cons of Docusaurus
- Less flexible for custom designs and layouts
- Heavier bundle size compared to Astro
- Limited to React for component development
Code Comparison
Docusaurus (configuration):
module.exports = {
title: 'My Site',
tagline: 'A website with Docusaurus',
url: 'https://mysite.com',
baseUrl: '/',
// ... more configuration options
};
Astro (configuration):
export default defineConfig({
site: 'https://mysite.com',
integrations: [mdx(), sitemap()],
// ... more configuration options
});
Both Astro and Docusaurus are popular static site generators, but they cater to different needs. Astro offers more flexibility and better performance, while Docusaurus provides a more opinionated structure with built-in features for documentation sites. Astro's component islands architecture allows for partial hydration, resulting in smaller bundle sizes and faster load times. However, Docusaurus may be easier for beginners and teams looking for a quick setup for documentation projects.
A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
Pros of Eleventy
- Simpler learning curve and more straightforward setup
- Highly flexible with support for multiple templating languages
- Faster build times for smaller to medium-sized projects
Cons of Eleventy
- Limited built-in components and interactivity features
- Less optimized for large-scale applications and complex data fetching
- Fewer out-of-the-box performance optimizations
Code Comparison
Eleventy (Nunjucks template):
---
layout: base.njk
title: My Page
---
<h1>{{ title }}</h1>
<p>Welcome to my site!</p>
Astro:
---
layout: ../layouts/BaseLayout.astro
title: My Page
---
<h1>{frontmatter.title}</h1>
<p>Welcome to my site!</p>
Both Eleventy and Astro are popular static site generators, but they cater to different needs. Eleventy excels in simplicity and flexibility, making it ideal for smaller projects and developers who prefer a more traditional approach. Astro, on the other hand, offers a more modern development experience with built-in components, partial hydration, and optimized performance for larger applications. The choice between the two depends on the project requirements, team expertise, and desired features.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Astro is a website build tool for the modern web —
powerful developer experience meets lightweight output.
Install
The recommended way to install the latest version of Astro is by running the command below:
npm create astro@latest
You can also install Astro manually by running this command instead:
npm install --save-dev astro
Looking for help? Start with our Getting Started guide.
Looking for quick examples? Open a starter project right in your browser.
Documentation
Visit our official documentation.
Support
Having trouble? Get help in the official Astro Discord.
Contributing
New contributors welcome! Check out our Contributors Guide for help getting started.
Join us on Discord to meet other maintainers. We'll help you get your first contribution in no time!
Directory
Several official projects are maintained outside of this repo:
| Project | Repository |
|---|---|
| @astrojs/compiler | withastro/compiler |
| Astro Language Tools | withastro/language-tools |
Links
Sponsors
Astro is free, open source software made possible by these wonderful sponsors.
Top Related Projects
The React Framework
The best React-based framework with performance, scalability and security built in.
Vite & Vue powered static site generator.
The Intuitive Vue Framework.
Easy to maintain open source documentation websites.
A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot