Astro

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.

Real-World Core Web Vitals

Astro

65%

Gatsby

44%

WordPress

43%

Next.js

28%

Nuxt

26%

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

---
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

---
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

---
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

---
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

---
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

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.

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.

Environment Variables

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

Deployment Adapters

Add an integration to instantly customize your project for Vercel, AWS, or your favorite hosting platform.

UI Integrations

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

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.

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

Start building with
Astro today

Get Started

npm create astro@latest

Copied!

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

Official Deployment Partner Official App Monitoring Partner Official Online Editor Partner

Sponsor Astro

The web framework for content-driven websites

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

Server-First

Content-Driven

Customizable

Astro Islands

Zero Lock-in

Snapback Cap

Snapback Cap

Snapback Cap

Snapback Cap

Snapback Cap

Fully Featured

Content Collections

Zero JavaScript, By Default

View Transitions

Middleware

Actions

Environment Variables

Deployment Adapters

UI Integrations

Dev Toolbar

Content Collections

View Transitions

UI Integrations

Zero JavaScript, By Default

Actions

Environment Variables

Deployment Adapters

Dev Toolbar

Themes

Get professional Astro support

Start building with Astro today

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

Start building with
Astro today