Integrating into Astro

Chai Studio allows you to export your UI as HTML or React components. While you can use the exported HTML directly in your Astro project, it's also possible to render your Chai Studio pages inside your Astro project with some additional configuration. Let's walk through the process.

Prerequisite:
You need to have @astrojs/react (opens in a new tab) installed in your Astro project.

Step 1: Configure Tailwind CSS

First, ensure you have Tailwind CSS set up in your Astro project. If you haven't already, you can add Tailwind to your Astro project by following the official Astro Tailwind integration guide (opens in a new tab).

Then, follow our guide to update your tailwind config to use Chai Studio.

Step 2: Configure the .chai files in tailwind config

Chai Studio saves your blocks in .chai files. We need to add these files to your Tailwind config and create a custom extractor function:

// tailwind.config.mjs
 
export default {
  // ... your existing config
  safelist: ["absolute", "inset-0", "w-full", "h-full"],
  content: {
    files: [
      // ... your existing content files
      "./src/**/*.chai",
    ],
    extract: {
      chai: (content) => {
        return content.replace(/#styles:/g, "").match(/[A-Za-z0-9-_:/\[\]]+/g) || [];
      },
    }
  }
}

Step 3: Importing and rendering Chai blocks as raw in Astro components

Now you can import your .chai files and use the <RenderChaiBlocks /> component to render the blocks in your Astro components:

---
import { RenderChaiBlocks, convertToBlocks } from "@chaibuilder/sdk/render";
import {loadWebBlocks} from "@chaibuilder/sdk/web-blocks";
import headerChai from "../views/header.chai?raw";
import homeChai from "../views/home.chai?raw";
import footerChai from "../views/footer.chai?raw";
loadWebBlocks()
---
 
<RenderChaiBlocks blocks={convertToBlocks(headerChai)} />
<RenderChaiBlocks blocks={convertToBlocks(homeChai)} />
<RenderChaiBlocks blocks={convertToBlocks(footerChai)} />

This setup allows you to seamlessly integrate Chai Studio-generated content into your Astro project, combining the power of Chai Studio's visual builder with Astro's performance and flexibility.