# Table of Contents
- [Astro](#astro)
- [Showcase | Astro](#showcase-astro)
- [The Astro Blog | Astro](#the-astro-blog-astro)
- [Themes | Astro](#themes-astro)
- [Astro 5.5 | Astro](#astro-5-5-astro)
- [Case Studies | Astro](#case-studies-astro)
- [Starlight | Astro](#starlight-astro)
- [Integrations | Astro](#integrations-astro)
- [Astroship | Astro](#astroship-astro)
- [Showcase | Astro](#showcase-astro)
- [Astrolus | Astro](#astrolus-astro)
- [Integrations | Astro](#integrations-astro)
- [Wallpapers | Astro](#wallpapers-astro)
- [Showcase | Astro](#showcase-astro)
- [Partner with Astro | Astro](#partner-with-astro-astro)
- [Astro Shopify | Astro](#astro-shopify-astro)
- [Showcase | Astro](#showcase-astro)
- [Prima persona | Astro](#prima-persona-astro)
- [Themes | Astro](#themes-astro)
- [Tailcast | Astro](#tailcast-astro)
- [Companies & Websites Using Astro · withastro/roadmap · Discussion #521 · GitHub](#companies-websites-using-astro-withastro-roadmap-discussion-521-github)
- [Press | Astro](#press-astro)
- [Quick Store | Astro](#quick-store-astro)
- [SKNCRE, a Hygraph cosmetics brand e-commerce | Astro](#skncre-a-hygraph-cosmetics-brand-e-commerce-astro)
- [Telemetry | Astro](#telemetry-astro)
- [Terms of Service | Astro](#terms-of-service-astro)
- [Themes | Astro](#themes-astro)
- [Privacy Policy | Astro](#privacy-policy-astro)
- [AstroNano | Astro](#astronano-astro)
- [Microblog | Astro](#microblog-astro)
- [Stablo Blog Template | Astro](#stablo-blog-template-astro)
- [Brutal | Astro](#brutal-astro)
- [Dante | Astro](#dante-astro)
- [Themes | Astro](#themes-astro)
- [Themes | Astro](#themes-astro)
- [Themes | Astro](#themes-astro)
- [Better Images in Astro | Astro](#better-images-in-astro-astro)
- [What’s new in Astro - February 2025 | Astro](#what-s-new-in-astro-february-2025-astro)
- [Unlock New Possibilities with Hybrid Rendering | Astro](#unlock-new-possibilities-with-hybrid-rendering-astro)
- [OpenBlog | Astro](#openblog-astro)
- [2023 Web Framework Performance Report | Astro](#2023-web-framework-performance-report-astro)
- [Netlify: Our Official Deployment Partner | Astro](#netlify-our-official-deployment-partner-astro)
- [Astro 5.3 | Astro](#astro-5-3-astro)
- [Starlight 0.32 | Astro](#starlight-0-32-astro)
- [Astro Design System & Docs | Astro](#astro-design-system-docs-astro)
- [Astro 5.2 | Astro](#astro-5-2-astro)
- [What’s new in Astro - January 2025 | Astro](#what-s-new-in-astro-january-2025-astro)
- [Astro 5.4 | Astro](#astro-5-4-astro)
- [The Astro Blog | Astro](#the-astro-blog-astro)
- [2024 year in review | Astro](#2024-year-in-review-astro)
- [Google IDX: Our Official Online Editor Partner | Astro](#google-idx-our-official-online-editor-partner-astro)
- [Astro 5.1 | Astro](#astro-5-1-astro)
- [Themefisher Astro Bundle | Astro](#themefisher-astro-bundle-astro)
- [What’s new in Astro - December 2024 | Astro](#what-s-new-in-astro-december-2024-astro)
- [Cosmic Themes All Access | Astro](#cosmic-themes-all-access-astro)
- [The Astro Blog | Astro](#the-astro-blog-astro)
- [The Astro Blog | Astro](#the-astro-blog-astro)
- [Astro 5.0 | Astro](#astro-5-0-astro)
- [t3ma Blog | Astro](#t3ma-blog-astro)
- [Titan Core | Astro](#titan-core-astro)
- [Ion | Astro](#ion-astro)
- [Esquelete CV | Astro](#esquelete-cv-astro)
- [positivus | Astro](#positivus-astro)
- [Sendit | Astro](#sendit-astro)
- [ShareYourLinks | Astro](#shareyourlinks-astro)
- [Swissfolio | Astro](#swissfolio-astro)
- [Bento Blog | Astro](#bento-blog-astro)
- [Quartiere | Astro](#quartiere-astro)
- [Lexington bundle | Astro](#lexington-bundle-astro)
- [Atom | Astro](#atom-astro)
- [Astroplate | Astro](#astroplate-astro)
- [Astrofy | Personal Porfolio Website Template | Astro](#astrofy-personal-porfolio-website-template-astro)
- [Stone | Astro](#stone-astro)
- [Astro Developer Portfolio Template | Astro](#astro-developer-portfolio-template-astro)
- [Astral Portfolio Theme | Astro](#astral-portfolio-theme-astro)
- [Astro Sassify | Astro](#astro-sassify-astro)
- [Low Power Blog | Astro](#low-power-blog-astro)
- [Rukia | Astro](#rukia-astro)
- [Astrov | Personal Portfolio Template with Astro 5.3 & Tailwind 4.0 | Astro](#astrov-personal-portfolio-template-with-astro-5-3-tailwind-4-0-astro)
- [Astro Citrus | Astro](#astro-citrus-astro)
- [DataNova | Astro](#datanova-astro)
- [Themes | Astro](#themes-astro)
- [No More Bottlenecks: How Thinkmill Reduced Dependencies on Senior Developers with Astro | Astro](#no-more-bottlenecks-how-thinkmill-reduced-dependencies-on-senior-developers-with-astro-astro)
- [Themes | Astro](#themes-astro)
- [Web Pages in Half the Time: Why Microsoft Chose Astro to Build Their Fluent 2 Design System Website | Astro](#web-pages-in-half-the-time-why-microsoft-chose-astro-to-build-their-fluent-2-design-system-website-astro)
- [Slashing Development Costs: How WP Engine Lowered Development Costs by Over 50% with Astro’s Starlight | Astro](#slashing-development-costs-how-wp-engine-lowered-development-costs-by-over-50-with-astro-s-starlight-astro)
- [Themes | Astro](#themes-astro)
- [Pro Folio | Astro](#pro-folio-astro)
- [Release Content Faster: How Firebase Cut Blog Publishing From Hours to Minutes with Astro | Astro](#release-content-faster-how-firebase-cut-blog-publishing-from-hours-to-minutes-with-astro-astro)
- [Content for Everyone: How Astro Helped Contenda Build a Content-Sharing Platform in One Month | Astro](#content-for-everyone-how-astro-helped-contenda-build-a-content-sharing-platform-in-one-month-astro)
- [Astroship Pro | Astro](#astroship-pro-astro)
- [Showcase | Astro](#showcase-astro)
- [Themes | Astro](#themes-astro)
- [bSaas Astro Template | Astro](#bsaas-astro-template-astro)
- [Integrations | Astro](#integrations-astro)
- [Sentry: Our Official Monitoring Partner | Astro](#sentry-our-official-monitoring-partner-astro)
---
# Astro
[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);---
{product.name}
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);---
{product.name}
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);---
{product.name}
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);---
{product.name}
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);---
{product.name}
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)
---
# Showcase | Astro
Explore the infinite possibilities of Astro
===========================================
* [Day of the Dead ](https://dayofthedead.holiday/)
* [Designcember ](https://designcember.com/)
* [Digital Goals | UNDP ](https://feature.undp.org/digital-goals/)
* [The Guardian Engineering ](https://theguardian.engineering/)
* [Hej! Welcome to IKEA Global ](https://www.ikea.com)
* [Jamie Oliver | Official website for recipes, books, TV shows and restaurants ](https://www.jamieoliver.com/)
* [Netlify ](https://www.netlify.com/)
* [Porsche ](https://www.porsche.com/)
* [Project IDX ](https://idx.dev/)
* [Groupe Michelin | Leader mondial des composites et expériences qui transforment notre quotidien ](https://www.michelin.com/)
* [FreeWorld ](https://freeworld.org/)
* [Proton: Privacy by default ](https://proton.me/)
* [Home - Fluent 2 Design System ](https://fluent2.microsoft.design/)
* [Gitter — Where developers come to talk. ](https://gitter.im/)
* [Amelite ](https://amelitegame.com/)
* [Achtung Baby ](https://u2spacebaby.u2.com/)
* [StackBlitz Blog ](https://blog.stackblitz.com/)
* [The best VPN service for speed and security in 2025 | NordVPN ](https://nordvpn.com)
* [The Firebase Blog ](https://firebase.blog/)
* [Trivago Tech Blog ](https://tech.trivago.com/)
* [Welcome to Cloudflare | Cloudflare Docs ](https://developers.cloudflare.com/)
* [Cloudflare + AI ](https://ai.cloudflare.com/)
* [Dodonut ](https://dodonut.com/)
* [Starlight 🌟 Build documentation sites with Astro ](https://starlight.astro.build/)
* [JavaScript Component Testing and E2E Testing Framework | Cypress ](https://www.cypress.io/)
* [Eva Decker ](https://eva.town)
* [Home - Ahmad Shadeed ](https://ishadeed.com/)
* [The interactive way to master modern React – react.gg ](https://react.gg/)
* [Nic Chan ](https://www.nicchan.me/)
* [Big Green Egg - Official Site - Kamado Ceramic Egg BBQ ](https://www.biggreenegg.co.uk)
---
# The Astro Blog | Astro
Welcome, world
==============
Get all the latest news from the Astroverse.
* 
### [Astro 5.5](/blog/astro-550/)
Astro 5.5 dives deep with better support for diagramming tools, improved Markdown compatibility, and type-safe sessions!
* 
### [What's new in Astro - February 2025](/blog/whats-new-february-2025/)
February 2025 - Storyblok live previews, Astro integrations at TheJam.dev, behind the scenes at Astro Together, and more!
* 
### [Astro 5.4](/blog/astro-540/)
Astro 5.4 brings remote image optimization in Markdown, enhanced security for dev and preview servers, RegExp support for Vercel ISR excludes, and more!
* 
### [Starlight 0.32](/blog/starlight-032/)
The latest Starlight features unlock new possibilities on our path to v1. Let’s meet route middleware, plugin i18n APIs, and multisite search.
* 
### [Astro 5.3](/blog/astro-530/)
Astro 5.3 is here with faster page rendering, easier setup for experimental sessions, and more!
* 
### [What's new in Astro - January 2025](/blog/whats-new-january-2025/)
January 2025 - Starting the year off with a bang!
* 
### [Astro 5.2](/blog/astro-520/)
Astro 5.2 is now available! The first minor release of 2025 includes Tailwind 4 support, a new way to access config values in your pages, better trailing slash handling, and support for external redirects.
* 
### [2024 year in review](/blog/year-in-review-2024/)
Revisit everything that happened in Astro last year: new feature releases, survey results, Astro Together, and more!
* 
### [What's new in Astro - December 2024](/blog/whats-new-december-2024/)
December 2024 - Astro 5, State of JS, Google IDX partnership, and more!
* 
### [Astro 5.1](/blog/astro-510/)
Astro 5.1 is now available. This includes a new experimental sessions feature, improved caching for images, and new tools for building Astro Actions.
* 
### [Astro 5.0](/blog/astro-5/)
Astro 5.0 brings exciting new features like the Astro Content Layer for seamless content loading from any source, and Server Islands for effortlessly combining static and dynamic personalized content.
* 
### [Google IDX: Our Official Online Editor Partner](/blog/idx-official-online-editor-partner/)
We are happy to announce that Google IDX has become Astro’s official online editor partner, donating $10,000 each month towards the ongoing open-source maintenance and development of Astro.
---
# Themes | Astro
Jumpstart your next project with a theme
========================================
Themes
------
[\
\
### Themefisher Astro Bundle\
\
30+ Astro themes for just $137. Get an extra 10% off with code ASTROLOVE.](/themes/details/themefisher-astro-bundle/)
[\
\
### Lexington bundle\
\
30+ Premium themes & future additions. 30% Off. Trusted by 8k developers](/themes/details/lexington-themes-bundle/)
[\
\
### Cosmic Themes All Access\
\
Lifetime access to all current and future templates for one low price. Packed with powerful features other themes leave out, allowing you to build better websites, faster.](/themes/details/cosmic-themes-all-access/)
[\
\
### Bento Blog\
\
A modern and aesthetic design template inspired by the Bento UI style. Built with Astro and optimized for performance and visual appeal.](/themes/details/bento-blog/)
[\
\
### t3ma Blog\
\
This is a custom-built Astro t3ma template that serves as the foundation for publishing and showcasing various projects, themes, and technical insights. It is designed for performance, readability, and scalability while maintaining a modern aesthetic.](/themes/details/t3ma-blog/)
[\
\
### Titan Core\
\
Titan Core is a high-performance, feature-rich theme for Astro JS, designed for modern websites, blogs, and portfolios. With beautiful UI components, multiple theme options, and a focus on performance, Titan Core helps you build stunning websites quickly.](/themes/details/titan-core/)
[\
\
### Low Power Blog\
\
A minimalist blog template focused on energy efficiency and low-power computing. Built with Astro and designed to be lightweight and performant.](/themes/details/low-power-blog/)
[\
\
### Astro Developer Portfolio Template\
\
A minimal, easy-to-customize developer portfolio template built with Astro and TailwindCSS. No JavaScript in final build. 100/100 Google PageSpeed Score – for both mobile and desktop. SEO & Social Media Ready, includes OpenGraph, Twitter, and DublinCore metadata.](/themes/details/astro-developer-portfolio-template/)
[\
\
### Astral Portfolio Theme\
\
Astral is a sleek, minimal portfolio theme built with Tailwind CSS and designed for creative professionals who value clean aesthetics and performance. With a framework-agnostic approach, Astral seamlessly adapts to your favorite stack, ensuring you can integrate it into any workflow. Subtle animations and a fully responsive design create a refined user experience that puts your work front and center.](/themes/details/astral-portfolio-theme/)
[\
\
### Astro Sassify\
\
Focus on your business, simplify your start. All the pages your need are ready here!](/themes/details/astro-sassify/)
[\
\
### Astrov | Personal Portfolio Template with Astro 5.3 & Tailwind 4.0\
\
A high-performance, fully responsive theme built with Astro v5.3 and TailwindCSS v4, featuring a sleek dark design, customizable components, and all essential pages. Everything is well-documented with helpful code comments for easy setup and customization.](/themes/details/astrov-personal-portfolio-template-with-astro-53-tailwind-40/)
[\
\
### Astro Citrus\
\
Hi, I’m an Astro theme for building websites or blogs. To customize, add posts, or make it yours, click the GitHub icon below to visit my repo.](/themes/details/astro-citrus/)
[\
\
### DataNova\
\
Open-source Astro website template with TailwindCSS, Keystatic CMS, and Astro DB support.](/themes/details/datanova/)
[\
\
### Rukia\
\
Built with the latest version of Tailwind CSS, every part is structured into components for effortless customization and easy integration.](/themes/details/rukia/)
[\
\
### Pro Folio\
\
Pro Foliox - A Sleek personal theme with sidebar that supports light and dark theme built with Astro and Talwind CSS](/themes/details/pro-folio/)
Submit a theme
--------------
Anyone can submit a theme to Astro. If you have questions about building your own theme, join our community on [Discord](/chat)
!
[Submit theme](https://portal.astro.build)
---
# Astro 5.5 | Astro
* * *
**Astro 5.5 dives deep with better support for diagramming tools, improved Markdown compatibility, and type-safe sessions!**
🧜♀️ Dive into a sea of new features with these improvements to Astro:
* [**Better support for diagramming tools in Markdown**](#better-support-for-diagramming-tools-in-markdown)
* [**Type-safe experimental sessions**](#type-safe-experimental-sessions)
* [**Improved heading ID compatibility**](#improved-heading-id-compatibility)
* [**Experimental: preserve order of style and script tags**](#experimental-preserve-order-of-style-and-script-tags)
To upgrade an existing project, use the automated `@astrojs/upgrade` CLI tool. Alternatively, upgrade manually by running the upgrade command for your package manager:
# Recommended:npx @astrojs/upgrade
# Manual:npm install astro@latestpnpm upgrade astro --latestyarn upgrade astro --latest
Better support for diagramming tools in Markdown
------------------------------------------------
Tools like Mermaid and D2 let you define charts and diagrams in code blocks in Markdown, which are then rendered inside the content. Until now, using these in Astro could be tricky, because Astro’s default syntax highlighting would interfere with how the code blocks were rendered.
Astro 5.5 introduces a new [`excludeLangs`](https://docs.astro.build/en/reference/configuration-reference/#markdownsyntaxhighlightexcludelangs)
option in your Markdown configuration that makes it possible to skip syntax highlighting for specific language code blocks. This unlocks the ability to use tools like these without disabling syntax highlighting for other blocks.
Here’s an example of how to configure Astro to disable highlighting for the `mermaid` language after installing the [`rehype-mermaid` plugin](https://github.com/remcohaszing/rehype-mermaid)
:
import { defineConfig } from 'astro/config';import rehypeMermaid from 'rehype-mermaid';
export default defineConfig({ markdown: { syntaxHighlight: { type: 'shiki', excludeLangs: ['mermaid', 'math'], }, rehypePlugins: [rehypeMermaid], },});
Then, you can create diagrams directly in your Markdown content:
```mermaidgraph TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D --> B```
This will then render as a diagram in your page.
Massive thanks to [Chris Chua](https://github.com/chrisirhc)
for this contribution.
Type-safe experimental sessions
-------------------------------
Astro 5.5 adds support for proper TypeScript typing for your session data, letting you banish `any` mistakes. Experimental support for session storage was added in Astro 5.1, but previously all session data was untyped. Now you can define the types of your session data by extending the global `App.SessionData` interface in your project’s `src/env.d.ts` file:
declare namespace App { interface SessionData { user: { id: string; email: string; }; lastLogin: Date; }}
This is optional, and any keys not defined in this interface will be treated as `any`. However, defining the types will provide accurate type checking and autocomplete when working with session data in your site:
---const user = await Astro.session.get('user');// `user` is properly typed as `{ id: string; email: string; } | undefined`
const something = await Astro.session.get('something');// `something` is typed as `any` since it's not defined in the interface
// TypeScript will catch this error:Astro.session.set('user', 1); // Error: Type 'number' is not assignable to type '{ id: string; email: string; }'---
This improvement makes working with sessions in Astro more reliable and helps catch potential errors at development time rather than at runtime.
For more information, see the [experimental sessions docs](https://docs.astro.build/en/reference/experimental-flags/sessions/#session-data-types)
.
Improved heading ID compatibility
---------------------------------
Astro 5.5 introduces a new [`experimental.headingIdCompat`](https://docs.astro.build/en/reference/experimental-flags/heading-id-compat/)
flag that generates heading IDs consistent with other common Markdown processors like those used by GitHub and npm.
By default, Astro removes trailing dashes from the end of IDs it generates for headings containing special characters. This behavior differs from other common Markdown processors, which can cause inconsistencies when linking to headings across different platforms.
With the new configuration flag, you can now ensure your heading IDs follow the same convention as other platforms:
import { defineConfig } from 'astro/config';
export default defineConfig({ experimental: { headingIdCompat: true, },});
This is particularly useful for sites that might have anchor links shared between GitHub, npm documentation, and your Astro website.
Experimental: preserve order of style and script tags
-----------------------------------------------------
Experimental flags aren’t only for cool new features. Sometimes, things just have to _change_. We also use experimental flags to carefully introduce you to breaking changes that will eventually become the new default behavior. [`experimental.preserveScriptOrder`](https://docs.astro.build/en/reference/experimental-flags/preserve-scripts-order/)
is one of them!
When rendering multiple `