Builder.io edit screen integration

General
1

I hope everyone is okay!

I’m new to builder.io and I’m studying the possibility of integrating it into my project.

for example, I want a screen on my system to have the option for people to develop their own component with builder.io, but for this I want the screen where we build our interface to be within my system. This screen:

Captura de tela de 2024-06-07 11-01-42
Captura de tela de 2024-06-07 11-01-421311×592 53.6 KB

Does anyone know if this would be possible?

2

Yes, it is absolutely possible to integrate Builder.io within another application! Builder.io offers various SDKs and APIs that make it feasible to embed and manage Builder content within different types of applications, including React, Next.js, Angular, Vue, and more.

Here’s a general step-by-step guide on how to integrate Builder.io within another application, using a React-based Next.js project for the example. This can be generalized to other frameworks or platforms.

Step-by-Step Guide to Integrate Builder.io within a Next.js Application

  1. Install Builder.io SDK:
npm install @builder.io/react

2. **Setup Builder.io in Your Application:**

- Initialize Builder.io with your public API key in a central place in your application, such as `_app.js` or `_app.tsx`.

```javascript // pages/_app.js or pages/_app.tsx import { builder } from '@builder.io/react';

// Replace with your public API key from Builder.io builder.init('YOUR_PUBLIC_API_KEY');

function MyApp({ Component, pageProps }) { return ; }

export default MyApp; ```
  1. Fetch and Render Builder.io Content:
  • Create a page or component that fetches and renders content from Builder.io.
// pages/index.js or pages/index.tsx
import { BuilderComponent, builder } from '@builder.io/react';
import { GetStaticProps } from 'next';

const HomePage = ({ page }) => {
return (

# Welcome to My Application

{page && }

);
};

export const getStaticProps: GetStaticProps = async () => {
const page = await builder.get('page', { url: '/' }).toPromise();

return { props: { page: page || null, }, revalidate: 10, };


};

export default HomePage;

4. **Using Custom Components in the Visual Editor:** - Create and register custom components that can be used in the Builder.io visual editor.

```javascript // components/MyCustomComponent.js or components/MyCustomComponent.tsx import React from 'react'; import { Builder } from '@builder.io/react';

const MyCustomComponent = ({ text }) => { return
{text}
; };

Builder.registerComponent(MyCustomComponent, { name: 'MyCustomComponent', inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello, Builder.io!' }], });

export default MyCustomComponent; ```
  • Use the custom component within Builder.io’s visual editor.
  1. Preview and Edit Content:
  • Use Builder.io’s visual editor to create and manage content. Your components will appear in the editor, allowing non-developers to build and edit pages visually.

Example: Integrating Builder.io in a Vanilla HTML + JavaScript Application

If you are integrating Builder.io into a vanilla HTML + JavaScript application, you can follow these steps:

  1. Include Builder.io SDK:

2. **Initialize Builder.io:**

```html ```
  1. Fetch and Render Content:

builder.get('page', { url: '/' }).then(content => { document.getElementById('builder-content').innerHTML = content.html; });

Summary

  • Install and configure the Builder.io SDK: Install the SDK in your project and initialize it with your public API key.
  • Fetch and render Builder.io content: Use Builder.io SDK methods to fetch content and render it within your application.
  • Register custom components: Create and register custom components to be used within Builder.io’s visual editor.
  • Preview and edit content: Use Builder.io’s visual editor to build and edit content, integrating seamlessly with your application’s front-end.

By following these steps, you should be able to integrate Builder.io within another application, allowing for powerful drag-and-drop visual content management that integrates with your existing tech stack. For more detailed information, you can refer to the official Builder.io documentation.

3

Sorry, I couldn’t understand it very well, could you explain it again in more detail with the next integration.

I just ran create-next-app and I’m trying to test it, it doesn’t have _app.tsx, it only has page.tsx

4

Hi @lucaz

I would recommend checking out below docs:-

  1. To integrate with next, please refer Integrating Pages - Builder.io
  2. To create your own component, please refer Intro to Integrating Custom Components - Builder.io or to create ones in editor please refer Reusing Blocks - Builder.io