Trying to create builder page

Visual Editor Help
1

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

Builder public api key
go to Builder.io: 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
Astro

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!

2

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.