New "astro:env" environment variable management

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 some of 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 unneccessary 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

60%

WordPress

38%

Gatsby

38%

Next.js

24%

Nuxt

20%

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>