Official astro support?

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:

Step 1: Create a New Astro Project

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.

Step 2: Install Builder.io

Install Builder.io’s SDK for React and any necessary dependencies:

npm install @builder.io/react react react-dom

Step 3: Create a Builder Component

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>

Step 4: Create and Use Custom Components

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.

Step 5: Setup Builder.io for Universal Rendering

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()],
});

Summary

  1. Create a New Astro Project: Initialize a new Astro project if you haven’t already.
  2. Install Builder.io SDK: Install the necessary Builder.io SDK for React.
  3. Create Builder Component: Create a Builder component in React and use it in your Astro pages.
  4. Register Custom Components: Register custom components with Builder.io and use them in the visual editor.

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.