Hi, I’ve been really impressed with builder, but I keep running into issue trying to implement builder in astro, this seems like it should be easy, but I keep running into the issues of documentation not being up to date, multiple versions of the api, and only one “starter” that uses solid.
Would it be possible for someone to write a tutorial or starter for a vanilla astro project that also shows how to use custom components in the visual editor (that was as far as I got so far).
Sure! I can help outline how to integrate Builder.io into an Astro project and provide a tutorial on how to use custom components in the visual editor. Let’s walk through the steps:
Start by creating a new Astro project if you haven’t already:
npm create astro@latest
cd my-astro-project
Follow the prompts to set up your project. Once complete, navigate into your project directory.
Install Builder.io’s SDK for React and any necessary dependencies:
npm install @builder.io/react react react-dom
First, create a Builder component that will be rendered in your Astro project.
1. Create a Builder Component:
// src/components/BuilderComponent.jsx
import React from 'react';
import { BuilderComponent, builder } from '@builder.io/react';
// Initialize Builder.io with your public API key
builder.init('YOUR_PUBLIC_API_KEY');
export default function MyBuilderComponent({ model }) {
return <BuilderComponent model={model} />;
}
2. Use the Builder Component in Your Astro Page:
Now you can use this component inside your Astro pages. Create a new page, say index.astro, and use the Builder component there.
---
import MyBuilderComponent from '../components/BuilderComponent';
---
<html>
<head>
<title>Astro + Builder.io</title>
</head>
<body>
<h1>Welcome to Astro with Builder.io</h1>
<div id="builder-content">
<MyBuilderComponent model="page" />
</div>
</body>
</html>
To add custom components to the Builder.io visual editor and use them in your Astro project, follow these steps:
1. Create a Custom Component:
Create a custom React component and register it with Builder.io.
// src/components/CustomComponent.jsx
import React from 'react';
import { Builder } from '@builder.io/react';
const CustomComponent = ({ text }) => {
return <div className="custom-component">{text}</div>;
};
// Register the component with Builder.io
Builder.registerComponent(CustomComponent, {
name: 'CustomComponent',
inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello, Builder.io!' }],
});
export default CustomComponent;
2. Add the Custom Component to a Builder.io Page:
Now, in the Builder.io visual editor, you should see your custom component (CustomComponent) available for use. Drag and drop it into your page, and configure it as needed.
Make sure the Builder components are rendered correctly on the server side. Update your astro.config.mjs to include React components:
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
});
This should give you a solid foundation to integrate Builder.io into an Astro project and use custom components effectively. If you encounter specific issues, refer to the updated Builder.io documentation or the Builder.io GitHub repository for additional examples and support.
@Stephane Please feel free to correct me if I’m wrong here, but this feels like it goes against the point of Astro, which is supposed to be pre-rendering, and using a React component requires hydration, which means the content won’t be there at build time.
It would be really nice if there were an (even unofficial) Astro SDK to make integrating Builder easier/quicker with Astro.
I should add, the HTML API seems to work fine for any pure content, but as soon as you move into using Custom Components, it appears you HAVE to use a React component, which I believe moves it into one of those “Islands” which requires hydration.