How to use multiple JSX frameworks in Astro

Did you know Astro is the "framework agnostic framework" - meaning it lets you use multiple frontend frameworks together? While Astro itself is a framework, you can use other frameworks in it for interactive elements or parts of the web page that aren’t static. This makes it an incredibly powerful tool for rapid development, content-heavy sites, or teams of devs with different specialties need to ship quickly. Astro supports the following frameworks: Alpine Preact React Svelte SolidJS Vue While most of these work out of the box without a problem, you will run into an issue if using multiple JSX frameworks such as React, Preact, and Solid in the same project. Let’s talk about that and how you can ensure you don’t run into the same issues I did when learning this. Project Structure While Astro’s documentation states that using separate directories per framework is optional, I personally prefer to do so; we’ll talk more about that later. Let’s say we are using React and Solid inside the same Astro project. You would create directories inside your components folder; one for React and one for Solid. src |components |Nav.astro |react |CounterReact.jsx |solid |LoginSolid.jsx |layouts |BaseLayout.astro |pages |__index.astro While the file names are up to you, I like appending the framework name to them so I know what framework they are using and where they are coming from no matter where in the code they are being called. Installing your frameworks I’m not going to repeat everything in Astro’s docs as they’re so good I implore you to use them for 99% of your issues; check the docs. However, let’s go over how to install your frameworks. React # npm npx astro add react # pnpm pnpm astro add react # yarn yarn astro add react SolidJS # npm npx astro add solid # pnpm pnpm astro add solid # yarn yarn astro add solid If the CLI doesn’t it for you automatically, we’ll have to add these integrations into our Astro config file as described in the next section. Astro config file While this file is not required for every project, most will have something you need to configure in it, which we definitely do here. If you are using frameworks in your Astro project, you’ll need this file. If you don’t have one already, create a file at the root of your project called astro.config.mjs and input the following snippet into it: import { defineConfig } from ‘astro/config’ export default defineConfig({ // your configuration options here… }) Next, we need to add our integrations; this is for any Astro integration you are using. import { defineConfig } from "astro/config"; import preact from "@astrojs/preact"; import react from "@astrojs/react"; import solidJs from "@astrojs/solid-js"; export default defineConfig({ integrations: [ preact(), solidJs(), ], }); Lastly, we need to tell Astro which files belong to which framework. We can achieve this using the include: [] syntax. This is required when using multiple JSX frameworks. Optionally, you can also use the exclude: [] syntax, however, I did not find that necessary in my project. import { defineConfig } from "astro/config"; import preact from "@astrojs/preact"; import react from "@astrojs/react"; import solidJs from "@astrojs/solid-js"; export default defineConfig({ integrations: [ react({ experimentalReactChildren: true, include: ["**/react/*"], }), solidJs({ include: ["**/solid/*"], }), ], }); This is why I highly encourage you to store all components for different frameworks in their own directory.

Feb 3, 2025 - 02:44

How to use multiple JSX frameworks in Astro

Did you know Astro is the "framework agnostic framework" - meaning it lets you use multiple frontend frameworks together?

While Astro itself is a framework, you can use other frameworks in it for interactive elements or parts of the web page that aren’t static. This makes it an incredibly powerful tool for rapid development, content-heavy sites, or teams of devs with different specialties need to ship quickly.

Astro supports the following frameworks:

Alpine
Preact
React
Svelte
SolidJS
Vue

While most of these work out of the box without a problem, you will run into an issue if using multiple JSX frameworks such as React, Preact, and Solid in the same project.

Let’s talk about that and how you can ensure you don’t run into the same issues I did when learning this.

Project Structure

While Astro’s documentation states that using separate directories per framework is optional, I personally prefer to do so; we’ll talk more about that later.

Let’s say we are using React and Solid inside the same Astro project. You would create directories inside your components folder; one for React and one for Solid.

src
|__components
|____Nav.astro
|____react
|______CounterReact.jsx
|____solid
|______LoginSolid.jsx
|__layouts
|____BaseLayout.astro
|__pages
|____index.astro

While the file names are up to you, I like appending the framework name to them so I know what framework they are using and where they are coming from no matter where in the code they are being called.

Installing your frameworks

I’m not going to repeat everything in Astro’s docs as they’re so good I implore you to use them for 99% of your issues; check the docs.

However, let’s go over how to install your frameworks.

React

# npm
npx astro add react
# pnpm
pnpm astro add react
# yarn
yarn astro add react

SolidJS

# npm
npx astro add solid
# pnpm
pnpm astro add solid
# yarn
yarn astro add solid

If the CLI doesn’t it for you automatically, we’ll have to add these integrations into our Astro config file as described in the next section.

Astro config file

While this file is not required for every project, most will have something you need to configure in it, which we definitely do here. If you are using frameworks in your Astro project, you’ll need this file.

If you don’t have one already, create a file at the root of your project called astro.config.mjs and input the following snippet into it:

import { defineConfig } from ‘astro/config’

export default defineConfig({
  // your configuration options here…
})

Next, we need to add our integrations; this is for any Astro integration you are using.

import { defineConfig } from "astro/config";
import preact from "@astrojs/preact";
import react from "@astrojs/react";
import solidJs from "@astrojs/solid-js";

export default defineConfig({
    integrations: [
        preact(),
        solidJs(),
    ],
});

Lastly, we need to tell Astro which files belong to which framework. We can achieve this using the include: [] syntax. This is required when using multiple JSX frameworks.

Optionally, you can also use the exclude: [] syntax, however, I did not find that necessary in my project.

import { defineConfig } from "astro/config";
import preact from "@astrojs/preact";
import react from "@astrojs/react";
import solidJs from "@astrojs/solid-js";

export default defineConfig({
    integrations: [
    react({
      experimentalReactChildren: true,
        include: ["**/react/*"],
    }),
    solidJs({
        include: ["**/solid/*"],
    }),
  ],
});

This is why I highly encourage you to store all components for different frameworks in their own directory.