edit screen integration

I hope everyone is okay!

I’m new to 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, but for this I want the screen where we build our interface to be within my system. This screen:

Does anyone know if this would be possible?

Yes, it is absolutely possible to integrate within another application! 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 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 within a Next.js Application

  1. Install SDK:
npm install

2. **Setup in Your Application:**

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

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

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

export default MyApp; ```
  1. Fetch and Render Content:
  • Create a page or component that fetches and renders content from
// pages/index.js or pages/index.tsx
import { BuilderComponent, builder } from '';
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 visual editor.

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

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

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

export default MyCustomComponent; ```
  • Use the custom component within’s visual editor.
  1. Preview and Edit Content:
  • Use’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 in a Vanilla HTML + JavaScript Application

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

  1. Include SDK:

2. **Initialize**

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

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


  • Install and configure the SDK: Install the SDK in your project and initialize it with your public API key.
  • Fetch and render content: Use SDK methods to fetch content and render it within your application.
  • Register custom components: Create and register custom components to be used within’s visual editor.
  • Preview and edit content: Use’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 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 documentation.

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

Hi @lucaz

I would recommend checking out below docs:-

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