# Builder.io edit screen integration
**URL:** https://forum.builder.io/t/builder-io-edit-screen-integration/5751
**Category:** General
**Created:** [June 7, 2024, 3:14pm UTC](https://forum.builder.io/t/builder-io-edit-screen-integration/5751 "2024-06-07T15:14:48Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@lucaz](https://forum.builder.io/u/lucaz)
#### Post date: [June 7, 2024, 3:14pm UTC](https://forum.builder.io/t/builder-io-edit-screen-integration/5751/1 "2024-06-07T15:14:49Z")
I hope everyone is okay!
I’m new to [builder.io](http://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](http://builder.io), 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?
---
### Author:  [@Stephane](https://forum.builder.io/u/Stephane)
#### Post date: [June 7, 2024, 4:10pm UTC](https://forum.builder.io/t/builder-io-edit-screen-integration/5751/2 "2024-06-07T16:10:35Z")
Yes, it is absolutely possible to integrate [Builder.io](http://Builder.io) within another application! [Builder.io](http://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](http://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](http://Builder.io) within a Next.js Application
1. **Install [Builder.io](http://Builder.io) SDK:**
- Install the [Builder.io](http://Builder.io) SDK for React.
```sh
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](http://Builder.io) Content:**
- Create a page or component that fetches and renders content from [Builder.io](http://Builder.io).
```javascript
// 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, };
```auto
};
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](http://Builder.io)’s visual editor.
1. **Preview and Edit Content:**
- Use [Builder.io](http://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](http://Builder.io) in a Vanilla HTML + JavaScript Application
If you are integrating [Builder.io](http://Builder.io) into a vanilla HTML + JavaScript application, you can follow these steps:
1. **Include [Builder.io](http://Builder.io) SDK:**
- Add the [Builder.io](http://Builder.io) SDK in your HTML file.
```html
```
2. \*\*Initialize Builder.io:\*\*
```html ```
1. **Fetch and Render Content:**
```html
builder.get('page', { url: '/' }).then(content => { document.getElementById('builder-content').innerHTML = content.html; });
```
### Summary
- **Install and configure the [Builder.io](http://Builder.io) SDK**: Install the SDK in your project and initialize it with your public API key.
- **Fetch and render [Builder.io](http://Builder.io) content**: Use [Builder.io](http://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](http://Builder.io)’s visual editor.
- **Preview and edit content** : Use [Builder.io](http://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](http://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](https://www.builder.io/c/docs).
---
### Author:  [@lucaz](https://forum.builder.io/u/lucaz)
#### Post date: [June 7, 2024, 10:12pm UTC](https://forum.builder.io/t/builder-io-edit-screen-integration/5751/3 "2024-06-07T22:12:25Z")
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
---
### Author:  [@anon43891756](https://forum.builder.io/u/anon43891756)
#### Post date: [June 14, 2024, 2:18pm UTC](https://forum.builder.io/t/builder-io-edit-screen-integration/5751/4 "2024-06-14T14:18:59Z")
Hi @lucaz
I would recommend checking out below docs:-
1. To integrate with next, please refer [Integrating Pages - Builder.io](https://www.builder.io/c/docs/integrating-builder-pages)
2. To create your own component, please refer [Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro) or to create ones in editor please refer [Reusing Blocks - Builder.io](https://www.builder.io/c/docs/reusing-blocks)