# Astro with Multiple Frameworks

import DocButton from '~/components/webkit/DocButton.vue';
import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
import Container from '~/components/webkit/Container.vue';

<SectionBasicContent
  description="The Astro with Multiple Frameworks template showcases Astro's built-in support for multiple frameworks (React, Preact, Svelte, and Vue). This template demonstrates how to leverage Astro's unique ability to mix and match different frameworks within the same project, allowing you to use the best tool for each component while maintaining optimal performance."
  buttons={[
    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-multi", outlined: false, icon: "ai ai-azion", iconPos: "left" },
    { label: "View demo", link: "https://jlhm2h8zmh.map.azionedge.net/", severity: "secondary" }
  ]}
>
  <Fragment slot="content">
    <div style="flex: 1; min-width: 300px;">
      | Item | Details |
      |:----------|:------|
      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-multiple) |
      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
      | Use Case | General |
    </div>
    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-multiple-frameworks.png" width="400" alt="Astro with multiple frameworks" style="min-width: 100%; max-width: 100%; height: auto;" />
    </div>
  </Fragment>
</SectionBasicContent>

## About this template

This template is built with [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) and comes preconfigured with the official React, Preact, Svelte, and Vue integrations. It demonstrates Astro's islands architecture, where components from different libraries coexist on the same page and hydrate independently. Deployed on Azion, the result is served via a distributed architecture for fast, globally distributed delivery.

## Key features

- Official integrations for React, Preact, Svelte, and Vue enabled out of the box
- Mix components from multiple UI libraries within a single Astro page
- Per-component hydration via Astro islands, shipping JavaScript only where needed
- Edge-optimized delivery through Azion for low-latency access worldwide

For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).