Page Inspect

Astro  Skip to content

Astro Logo

Documentation Blog Resources

- Themes
- Integrations
- Site showcase
- Tutorials

Community

- Discord
- Sponsors
- Merch

Enterprise

- Agencies New
- Case studies

Go to Astro's GitHub repo

Show Menu

Blog Resources

Themes Integrations Site showcase TutorialsCommunity

Discord Sponsors Merch

Enterprise

Agencies New Case studies

Follow Astro on Bluesky Join the Astro community on Discord Go to Astro's GitHub repo Follow Astro on LinkedIn Follow Astro on Mastodon Join the official Astro community on Reddit Follow Astro on x.com (formerly Twitter) Follow Astro on YouTube

Read the docs

Astro ❤️ Stainless

Automated API docs, powered by Astro

# The web framework for content-driven websites

Astro powers the world's fastest marketing sites, blogs, e-commerce websites, and more.

Get Started

`npm create astro@latest`

Copied!

Used by the largest companies around the world:

What is Astro?## **Astro** is a JavaScript web framework optimized for building fast, content-driven websites.

## Server-First

Astro improves website performance by rendering components on the server, sending lightweight HTML to the browser with zero unnecessary JavaScript overhead.

## Content-Driven

Astro was designed to work with your content, no matter where it lives. Load data from your file system, external API, or your favorite CMS.

## Customizable

Extend Astro with your favorite tools. Bring your own JavaScript UI components, CSS libraries, themes, integrations, and more.

Best-In-Class Performance## **Astro Islands**

Islands optimize your website like no other web framework can. Leverage Astro's unique page load performance to improve conversion rates, Core Web Vitals, and SEO.

% of real-world sites with good Core Web Vitals

Astro

Astro Core Web Vitals Passing

63%

WordPress

WordPress Core Web Vitals Passing

44%

Gatsby

Gatsby Core Web Vitals Passing

42%

Next.js

Next.js Core Web Vitals Passing

27%

Nuxt

Nuxt Core Web Vitals Passing

24%

View the full dataset · Based on real-world performance data from HTTP Archive and the Chrome UX Report.

Maximum Flexibility## **Zero Lock-in**

Astro supports every major UI framework. Bring your existing components and take advantage of Astro's optimized client build performance.

Integrate your favorite framework

React

Vue

Preact

Svelte

Solid

---import BuyButton from '../components/BuyButton.jsx';import { getProductDetails } from "ecommerce-package";import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);---
<ProductPageLayout>  <img src={product.imageUrl} alt={product.imageAlt} />  <h2>{product.name}</h2>  <BuyButton id={product.id} client:load /></ProductPageLayout>

## Snapback Cap

$15.50

Add to cart

---import BuyButton from '../components/BuyButton.vue';import { getProductDetails } from "ecommerce-package";import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);---
<ProductPageLayout>  <img src={product.imageUrl} alt={product.imageAlt} />  <h2>{product.name}</h2>  <BuyButton id={product.id} client:load /></ProductPageLayout>

## Snapback Cap

$15.50

Add to cart

---import BuyButton from '../components/BuyButton.jsx';import { getProductDetails } from "ecommerce-package";import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);---
<ProductPageLayout>  <img src={product.imageUrl} alt={product.imageAlt} />  <h2>{product.name}</h2>  <BuyButton id={product.id} client:load /></ProductPageLayout>

## Snapback Cap

$15.50

Add to cart

---import BuyButton from '../components/BuyButton.svelte';import { getProductDetails } from "ecommerce-package";import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);---
<ProductPageLayout>  <img src={product.imageUrl} alt={product.imageAlt} />  <h2>{product.name}</h2>  <BuyButton id={product.id} client:load /></ProductPageLayout>

## Snapback Cap

$15.50

Add to cart

---import BuyButton from '../components/BuyButton.jsx';import { getProductDetails } from "ecommerce-package";import ProductPageLayout from '../layouts/ProductPageLayout.astro';
const product = await getProductDetails(Astro.params.slug);---
<ProductPageLayout>  <img src={product.imageUrl} alt={product.imageAlt} />  <h2>{product.name}</h2>  <BuyButton id={product.id} client:load /></ProductPageLayout>

## Snapback Cap

$15.50

Add to cart

Everything you need## **Fully Featured**

Astro comes with everything you need to build a modern website. Need more? Extend Astro with integrations.

### Content Collections

Organize your Markdown and MDX with built-in TypeScript type-safety and frontmatter validation.

0

### Zero JavaScript, By Default

Astro only ships the JavaScript you need and automatically strips away the rest for a faster website.

### View Transitions

Seamlessly morph, fade, and swipe across pages with built-in, browser-native View Transition APIs.

800px • WEBP

3600px • PNG

### Optimized Images

Eliminate layout shift and serve optimized, modern image formats with Astro’s built-in components and utilities.

### UI Integrations

Bring your favorite UI frameworks and component libraries with Astro's flexible island architecture.

React Vue Svelte Angular Preact Solid Qwik

### File-Based Routing

Astro’s flexible routing system lets you understand your site’s structure at a glance.

- pages
- api
- json.ts
- blog
- \[slug.astro\]
- 404.astro
- about.astro
- index.astro

### Middleware

Wrap incoming requests with custom logic like authentication, logging, or data fetching.

### Actions

Write type-safe backend functions that you can call directly from your frontend JavaScript client code.

### Deployment Adapters

One-line configuration for Netlify, Vercel, AWS, or your favorite hosting platform.

Node.js Cloudflare Vercel Netlify SST Deno AWS

### Simple Templating

If you know HTML, you already know enough to write your first Astro component. Build powerful server components everyone on your team understands.

<Logo>

<NavLinks>

<Hero>

<Article>

<Video>

### Instant Page Loads

Optimize page loading with intelligent automatic prefetching. Pick from the built-in presets or tailor a strategy perfect for your site.

### AI-Ready

Integrate Astro’s official MCP server and context files with your favorite AI tools for a best-in-class development experience.

### Environment Variables

Avoid common configuration mistakes with a built-in API to manage your environment variables.

### Dev Toolbar

Extend your development environment with apps and integrations for the built-in development toolbar.

Ecosystem## **Themes**

Get started faster with a pre-built website theme for Astro. Customize it to make it your own.

Trending

E-Commerce

Blogs

Docs

Portfolios

Landing Pages

View Theme

View Theme

View Theme

View Theme

View Theme

Browse more themes

View Theme

View Theme

View Theme

Browse more e-commerce themes

View Theme

View Theme

View Theme

View Theme

View Theme

View Theme

Browse more blog themes

View Theme

View Theme

View Theme

Browse more documentation themes

View Theme

View Theme

View Theme

View Theme

View Theme

Browse more portfolio themes

View Theme

View Theme

View Theme

View Theme

View Theme

Browse more landing page themes

Astro Partner Agencies## **Get professional Astro support**

Find the right team for your project with an Astro Partner Agency. From landing pages to e-commerce, get the expert assistance you need.

Explore partner agencies

- EXDST
- Seibert Group GmbH
- Bits&Letters
- 58agents GmbH
- Bejamas
- Lucky Media

## Start building with
Astro today

Get Started

`npm create astro@latest`

Copied!

## Astro is free, open-source software made possible by these wonderful sponsors

Netlify Official Deployment Partner Firebase Studio Official Online Editor Partner

Webflow Official Partner Cloudflare Official Partner

Mux Official Video Partner

ArcJet HandsOnTable Lucky Media Datadog Duende Databento Localazy Sponsor Astro

Let's keep in touch

Enter your email to stay up to date with the latest updates from Astro.

Email

## Resources

- Docs
- Themes
- Integrations
- Site showcase
- Starter templates

## About

- Blog
- Case studies
- Partner with us
- Press
- Agencies

## Community

- Contributing
- Sponsors
- Wallpapers
- Swag Shop

## Legal

- Telemetry
- Privacy Policy
- Terms of Service

* * *

MIT License © 2025  Astro Contributors

Follow Astro on Bluesky Join the Astro community on Discord Go to Astro's GitHub repo Follow Astro on LinkedIn Follow Astro on Mastodon Join the official Astro community on Reddit Follow Astro on x.com (formerly Twitter) Follow Astro on YouTube