[Skip to content](#main)
[
Astro 5.5
Available now!
](/blog/astro-550/)
The web framework for content-driven websites
=============================================
Astro powers the world's fastest marketing sites, blogs, e-commerce websites, and more.
[Get Started](https://docs.astro.build/)
`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 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
Astro Core Web Vitals Passing
65%
Gatsby
Gatsby Core Web Vitals Passing
44%
WordPress
WordPress Core Web Vitals Passing
43%
Next.js
Next.js Core Web Vitals Passing
28%
Nuxt
Nuxt Core Web Vitals Passing
26%
[View the full dataset](https://lookerstudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC?params=%7B%22df44%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580WordPress%25EE%2580%2580Next.js%25EE%2580%2580Nuxt.js%25EE%2580%2580Gatsby%25EE%2580%2580Astro%25EE%2580%2580SvelteKit%25EE%2580%2580Remix%22%7D) · Based on real-world performance data from [HTTP Archive](https://httparchive.org/) and the [Chrome UX Report](https://developer.chrome.com/docs/crux).
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](https://docs.astro.build/en/guides/integrations-guide/#official-integrations)
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.
](https://docs.astro.build/en/guides/content-collections/)[
0
### Zero JavaScript, By Default
Astro only ships the JavaScript you need and automatically strips away the rest for a faster website.
](https://docs.astro.build/en/basics/astro-components/)[
### View Transitions
Seamlessly morph, fade, and swipe across pages with built-in, browser-native View Transition APIs.
](https://docs.astro.build/en/guides/view-transitions/)[
### Middleware
Wrap incoming requests with custom logic like authentication, logging, or data fetching.
](https://docs.astro.build/en/guides/middleware/)[
### Actions
Write type-safe backend functions that you can call directly from your frontend JavaScript client code.
](https://docs.astro.build/en/guides/actions/)[
### Environment Variables
Avoid common configuration mistakes with a built-in API to manage your environment variables.
](https://docs.astro.build/en/guides/environment-variables/)[
### Deployment Adapters
Add an integration to instantly customize your project for Vercel, AWS, or your favorite hosting platform.
](https://astro.build/integrations/?search=&categories%5B%5D=adapters)[
### UI Integrations
Bring your favorite UI frameworks and component libraries with Astro's flexible island architecture.
](https://docs.astro.build/en/guides/integrations-guide/)[
### Dev Toolbar
Extend your development environment with apps and integrations for the built-in development toolbar.
](https://docs.astro.build/en/guides/dev-toolbar/)
[
### Content Collections
Organize your Markdown and MDX with built-in TypeScript type-safety and frontmatter validation.
](https://docs.astro.build/en/guides/content-collections/)[
### View Transitions
Seamlessly morph, fade, and swipe across pages with built-in, browser-native View Transition APIs.
](https://docs.astro.build/en/guides/view-transitions/)[
### UI Integrations
Bring your favorite UI frameworks and component libraries with Astro's flexible island architecture.
](https://docs.astro.build/en/guides/integrations-guide/)
[
0
### Zero JavaScript, By Default
Astro only ships the JavaScript you need and automatically strips away the rest for a faster website.
](https://docs.astro.build/en/basics/astro-components/)[
### Actions
Write type-safe backend functions that you can call directly from your frontend JavaScript client code.
](https://docs.astro.build/en/reference/configuration-reference/#experimentalactions)[
### Environment Variables
Avoid common configuration mistakes with a built-in API to manage your environment variables.
](https://docs.astro.build/en/guides/environment-variables/)[
### Deployment Adapters
Add an integration to instantly customize your project for Vercel, AWS, or your favorite hosting platform.
](https://astro.build/integrations/?search=&categories%5B%5D=adapters)[
### Dev Toolbar
Extend your development environment with apps and integrations for the built-in development toolbar.
](https://docs.astro.build/en/guides/dev-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
](https://astro.build/themes/details/starlight/)[
View Theme
](https://astro.build/themes/details/astroship/)[
View Theme
](https://astro.build/themes/details/astrolus/)[
View Theme
](https://astro.build/themes/details/prima-persona/)[
View Theme
](https://astro.build/themes/details/tailcast/)
[Browse more themes](/themes)
[
View Theme
](https://astro.build/themes/details/astro-shopify/)[
View Theme
](https://astro.build/themes/details/quick-store/)[
View Theme
](https://astro.build/themes/details/skncre-a-hygraph-cosmetics-brand-e-commerce/)
[Browse more e-commerce themes](https://astro.build/themes/?search=&categories%5B%5D=ecommerce)
[
View Theme
](https://astro.build/themes/details/astronano/)[
View Theme
](https://astro.build/themes/details/stablo-blog-template/)[
View Theme
](https://astro.build/themes/details/microblog/)[
View Theme
](https://astro.build/themes/details/dante/)[
View Theme
](https://astro.build/themes/details/brutal/)[
View Theme
](https://astro.build/themes/details/openblog/)
[Browse more blog themes](https://astro.build/themes/?search=&categories%5B%5D=blog)
[
View Theme
](https://astro.build/themes/details/starlight/)[
View Theme
](https://astro.build/themes/details/astro-design-system-docs/)[
View Theme
](https://astro.build/themes/details/ion/)
[Browse more documentation themes](https://astro.build/themes/?search=&categories%5B%5D=docs)
[
View Theme
](https://astro.build/themes/details/astrofy-personal-porfolio-website-template/)[
View Theme
](https://astro.build/themes/details/swissfolio/)[
View Theme
](https://astro.build/themes/details/gurido/)[
View Theme
](https://astro.build/themes/details/shareyourlinks/)[
View Theme
](https://astro.build/themes/details/esquelete-cv/)
[Browse more portfolio themes](https://astro.build/themes/?search=&categories%5B%5D=portfolio)
[
View Theme
](https://astro.build/themes/details/sendit/)[
View Theme
](https://astro.build/themes/details/stone/)[
View Theme
](https://astro.build/themes/details/positivus/)[
View Theme
](https://astro.build/themes/details/atom/)[
View Theme
](https://astro.build/themes/details/astroplate/)
[Browse more themes](/themes)
Start building with
Astro today
---------------------------------
[Get Started](https://docs.astro.build/)
`npm create astro@latest`
Copied!
Astro is free, open-source software made possible by these wonderful sponsors
-----------------------------------------------------------------------------
[Netlify Official Deployment Partner](https://www.netlify.com/?utm_campaign=Astro-2024&utm_source=astro-referral) [Sentry Official App Monitoring Partner](https://sentry.io/welcome/?utm_medium=partner&utm_source=astro&utm_campaign=astro-homepage) [Google IDX Official Online Editor Partner](https://idx.dev/?utm_source=astro&utm_medium=astro&utm_campaign=astro)
[JetBrains](https://www.jetbrains.com/) [ArcJet](https://arcjet.com/?ref=astro.build) [HandsOnTable](https://handsontable.com/) [Route4Me, Route Planner and Route Optimizer](https://route4me.com/) [Manifest - A complete backend in 1 YAML file](https://manifest.build) [Woolly Mammoth - Digital Agency](https://mammoth.tech) [Lucky Media](https://www.luckymedia.dev/astro-development-agency?utm_campaign=sponsor&utm_source=astro&utm_medium=web) [Jspreadsheet](https://jspreadsheet.com/) [Datadog](https://www.datadoghq.com/) [Sponsor Astro](https://opencollective.com/astrodotbuild)