You can skip manual integration and let Builder's Devtools handle the details for you.
Builder Devtools automatically integrates your app with Builder and provides an intuitive UI for registering components and managing content.
The video below is a guided example of integrating with Devtools with Next.js Gen 1. Though the video uses Next.js Gen 1 specifically, the process is the same for Gen 2, in any of the available frameworks.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
These instructions apply to React with Webpack as well as Vite and Devtools supports both bundlers.
Tip: For React with Webpack, make sure that webpack.config.js is at the root of your project.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestThis command automatically sets up the integration with Builder, connects to your Builder account, and adds your API key.
When prompted, respond Yes to integrating with Builder.io and installing dependencies.
After installing Builder Devtools, start your development server, for example:
npm run devThe command you use to start your dev server depends on your configuration. Another common command to start the development server is npm run start, but always refer to your package.json file to identify the correct script for your project.
Open your web browser and navigate to your project's local development URL, for example, http://localhost:5173/.
To continue configuring your app, go to the instructions for your bundler:
This section covers the specifics for setting up React with Webpack. For React with Vite, go to the Vite instructions.
Import the plugin at the top of webpack.config.js, and add the plugin to the plugins array.
// webpack.config.js
const { BuilderDevToolsPlugin } = require("@builder.io/dev-tools/webpack");
// ...
// ...
// This is usually where the
// HtmlWebpackPlugin or InlineChunkHtmlPlugin are
plugins: [
// ...
new BuilderDevToolsPlugin(),
]
// ...Tip: Note that the Webpack plugin only runs in dev mode.
If you do not already have routing set up, make sure to add it. A possible option is React Router, but you could use the router of your choice.
Add the following route definition:
import { BuilderPage } from './builder-page'
// ...
// with your other routes:
<Route path="builder-demo" element={<BuilderPage />} />Provide your Public API Key to src/builder-page.jsx, a file that Devtools creates to assist in integration:
// src/builder-page.jsx
// Replace with your Public API Key
builder.init(YOUR_PUBLIC_BUILDER_KEY);This section covers the specifics of setting up a React Vite app with Builder Devtools. These instructions assume:
- You already have a working React Vite app.
- You've already installed Builder Devtools as in the instructions at the beginning of this document.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. The port might be different for you. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Because React with Vite requires a route, as noted in the Devtools UI, continue below for instructions on how to add the route.
If you do not already have routing set up, make sure to add it. A possible option is React Router, but you could use the router of your choice.
You should be at the end point of the video in the last section.
To satisfy the Devtools requirements, add a route. Wherever you have your routes (this depends on your configuration), update the path to /builder-demo or /*. For example, here's a route with the path /builder-demo in src/App.jsx:
// This example is in src/App.jsx
import { Routes, Route } from 'react-router-dom';
import { BuilderPage } from './builder-page';
// ...
function App() {
return (
<>
<h1>Vite + React</h1>
<Routes>
// Add route here
<Route path="/builder-demo" element={<BuilderPage />} />
// Add your other routes
</Routes>
</>
)
}
export default AppMake sure you import the BuilderPage component from the builder-page file and define a route with the path /builder-demo that renders the BuilderPage component.
You can add more routes for your other components as needed.
In the browser, check the checkbox next to I’ve updated my router files and click the Finish button that shows on click.
When you click Finish, you'll go to your app. On the bottom right, click on the Builder logo to access Devtools features as in the video below.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
For this framework, see Integrating Pages.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
For this framework, see Integrating Pages.
For this framework, see Integrating Pages.
For this framework, see Integrating Pages.
For this framework, see Integrating Pages.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
For this framework, see Integrating Pages.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
1. Open your web browser and navigate to your project's local development URL; for example, http://localhost:4200/. The port might be different for you.
2. Click the Let's Get Started button.
3. Choose a Space to authorize for integration and click Authorize.
4. Follow the instructions in the browser and add a path to your routes for the BuilderPage component in your code editor, for example:
// Check your app structure for your import. For example:
import { BuilderPage } from './components/builder-page.component';
// and add the path to your routes
{ path: 'builder-demo', component: BuilderPage }, 5. Once the routes have been added, select the I've updated my Router files option.
6. Click the Finish button.
7. On the bottom right, click the Builder logo to get to your components and settings and add a Builder Page.
Tip: If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space, including adding the route.
Support for this framework is in active development. In the meantime, you can still integrate your app with Builder by following the instructions in Integrating Pages.
In the root of your project, run the following command to install Builder Devtools:
npm init builder.io@latestWhen prompted, respond Yes to integrating with Builder.io:
Tip: If you're using React Webpack and Vite, you can skip this part as you've already covered it above. React Webpack and Vite require adding a route, so the UI is slightly different.
With the development server running, access the Builder Devtools UI:
- Open your web browser and navigate to your project's local development URL; for example,
http://localhost:3000/orhttp://localhost:5173/. (The port might be different for you.) Builder's Devtools are displayed in the browser instead of your app's landing page. - Click the Let's get started button.
- Choose a Space to authorize for integration and click Authorize.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to get to your components, settings, and to add a Builder Page.
If you're using Windows, you might need to restart your dev server.
The video below shows authorizing and connecting to a Builder Space.
The Devtools drawer displays all of your components, both registered and unregistered. From here, you can:
- Register components: toggle components on to register them with Builder.
- View and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.
- Visualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.
To register your components with Builder:
- Open the Devtools drawer by clicking on the Builder logo on the bottom right.
- Click Components to display all of the components, registered or not, in your code base.
- Select a component.
- Toggle on to register the component. The code to register the component is added automatically to your code.
The next video shows this process by registering a Counter component:
The next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.
When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.
For REST, see Integrating Pages.
For this framework, see Integrating Pages.
For this framework, see Integrating Pages.
For this framework, see Integrating Pages.
Devtools is under active development, and we'd love to know what you think. Your feedback helps us meet the real-world needs of Builder's community and we couldn't do it without you!
With your app and Builder working together, the next step is the fun part — add some pages in Builder and drag in some elements. Play with styles and explore the UI.