Trying to create builder page

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
Test Page | Visual Editor |

Builder public api key
go to Visual Development Platform

What are you trying to accomplish
Trying to follow the Integrating Pages section of the documentation.

Screenshots or video link

Code stack you are integrating Builder with

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

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.