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 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

Install’s SDK for React and any necessary dependencies:

npm install 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 '';

// Initialize with 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';

    <title>Astro +</title>
    <h1>Welcome to Astro with</h1>
    <div id="builder-content">
      <MyBuilderComponent model="page" />

Step 4: Create and Use Custom Components

To add custom components to the 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

// src/components/CustomComponent.jsx
import React from 'react';
import { Builder } from '';

const CustomComponent = ({ text }) => {
  return <div className="custom-component">{text}</div>;

// Register the component with
Builder.registerComponent(CustomComponent, {
  name: 'CustomComponent',
  inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello,!' }],

export default CustomComponent;

2. Add the Custom Component to a Page:

Now, in the 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 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()],


  1. Create a New Astro Project: Initialize a new Astro project if you haven’t already.
  2. Install SDK: Install the necessary 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 and use them in the visual editor.

This should give you a solid foundation to integrate into an Astro project and use custom components effectively. If you encounter specific issues, refer to the updated documentation or the GitHub repository for additional examples and support.