Build faster websites.

Pull content from anywhere and serve it fast with Astro's next-gen island architecture.

Get Started

npm create astro@latest

Rebuilt my blog with Astro
out of curiosity… holy ■■■■ !

Next.js

138 kB

Astro

7.6 kB JavaScript page load

Source: Theo, CEO @ Ping Labs

Trusted by over 30,000 developers and world-class teams

Designed for speed

Introducing: Astro Islands

Astro Islands represent a leading paradigm shift for frontend web architecture. Astro extracts your UI into smaller, isolated components on the page. Unused JavaScript is replaced with lightweight HTML, guaranteeing faster loads and time-to-interactive (TTI).

Learn more about Astro Islands

Zero JavaScript Runtime

Astro renders HTML on the server and strips away any remaining, unused JavaScript.
The Power of Islands

Need interactive UI? Load individual, non-blocking component islands in parallel.
Lazy-Loading Islands

Components only hydrate when they scroll into view. If you don't see it, Astro won't load it.

Designed for content

Your content, your way.

Astro works with your favorite content sources. Pull content from the filesystem or fetch it remotely from your favorite CMS, database, or API. Astro supports both static output (SSG) and live server output (SSR) that can render your content on-demand.

CMS
Markdown
MDX
API

Using your CMS

With top-level await, Astro makes it easy to fetch content from your CMS.

Storyblok content
Templating with Astro

src/pages/cms-data.astro

---
import { storyblokApi } from "../cms";

const { data } = await storyblokApi.get('cdn/links');
const links = Object.values(data.links);
---
<h1>Using your CMS</h1>
<p>
  With top-level await, Astro makes it easy
  to fetch content from your CMS.
</p>
<ul>
  {links.map((link) => (
    <li><a href={link.slug}>{link.name}</a></li>
  ))}
</ul>

Creating pages with Markdown

Creating a page using Markdown is easy with Astro!

Add a .md file to your pages directory and Astro will turn it into a page on your site. You can specify an Astro component in frontmatter to use as a page layout.

src/pages/markdown-pages.md

---
title: Creating pages with Markdown
layout: ../layouts/Base.astro
---

Creating a page using Markdown is _easy_ with Astro!

Add a `.md` file to your `pages` directory and Astro
will turn it into a page on your site. You can specify
an Astro component in frontmatter to use as a page
layout.

Creating pages with MDX

Creating a page using MDX is easy with Astro!

Add a .mdx file to your pages directory and Astro will turn it into a page on your site. MDX files make it easy to mix components from any framework with your text content.

src/pages/components-in-markdown.mdx

---
title: Creating pages with MDX
layout: ../layouts/Base.astro
---

import Hero from '../components/Hero.astro'
import Counter from '../components/Counter.jsx'

<Hero>
  Creating a page using MDX is _easy_ with Astro!
</Hero>

Add a `.mdx` file to your `pages` directory and Astro
will turn it into a page on your site. MDX files make
it easy to mix components from any framework with
your text content.

<Counter client:visible />

Using an API

With native fetch built-in, Astro makes it easy to work with data from any API. Powered by https://owen-wilson-wow-api.herokuapp.com

src/pages/wow.astro

---
const response = await fetch('https://owen-wilson-wow-api.herokuapp.com/wows/random');
const data = await response.json();
---
<h1>Using an API</h1>
<p>
  With native fetch built-in, Astro makes it easy
  to work with data from any API.
  Powered by https://owen-wilson-wow-api.herokuapp.com.
</p>
<audio controls>
  <source src={data.audio} type="audio/mpeg">
</audio>

Designed to feel familiar

Use the tools you already love.

Bring your own component framework. Astro offers first-class support for front-end tools like React, Vue, Svelte, and Tailwind CSS. Avoid confusing configuration and get started in seconds: just type astro add.

Get started with integrations

Designed to scale

Deploy to anywhere, even the edge.

Astro supports both static output (SSG) and live server output (SSR). No matter what you choose to build, Astro's flexible adapter system makes deployment setup and configuration a breeze.

Deploy your first Astro site

Designed to grow with you

Explore Astro’s ecosystem.

Get more out of Astro with an ecosystem of 100+ integrations & themes to explore. Community packages make it easy to add new features to your project to improve performance, SEO, analytics, accessibility and more.

See all integrations See all themes

Learn more about @astrojs/tailwind
@astrojs/tailwind

Tailwind + Astro Integrations
Learn more about @astrojs/image
@astrojs/image

Load and transform images in your Astro site.
Learn more about @astrojs/partytown
@astrojs/partytown

Astro + Partytown integration

Designed for everyone

Our community is pretty great, too.

The best thing about Astro is its community. The Astro Discord is full of 5000+ builders ready to help you troubleshoot, find inspiration, and have fun as you explore with Astro. Our open governance model allows anyone to contribute and get involved with growing and maintaining Astro. All experience levels welcome!

Join us on Discord