Using Builder Devtools for Automated Integration

You can skip manual integration and let Builder's Devtools handle the details for you.

Builder Devtools automatically handles integration with Builder's Visual Headless CMS and provides an intuitive UI for registering components and managing content.

Currently, Builder Devtools supports integration with Next.js, Remix, and Qwik.

Need another framework? While we add more frameworks, refer to the Developer Quickstart to integrate with other frameworks.

Prerequisites

Make sure you have Node.js and npm (Node Package Manager) installed on your system.

Create an app if you don't already have one

Generate an app and cd into the new app's directory by running the following command at the command line, where my-next-app or my-qwik-app is the name you give your app:

Install Builder Devtools

This command automatically sets up the integration with Builder, connects to your Builder account, and adds your API key.

In the root of your project, run the following command to install Builder Devtools:

npm init builder.io@latest

When prompted, respond Yes to integrating with Builder.io:

Screenshot of terminal prompt that asks "Would you like to integrate Builder.io with this app?". There are two options, Yes, and Maybe later. Here, "Yes install dependencies and update vite.config.ts" is selected.

Start the development server

After installing Builder Devtools, start your development server:

npm run dev

Access the Builder Devtools UI

With the development server running, access the Builder Devtools UI:

Open your web browser and navigate to your project's local development URL — usually http://localhost:3000/ for Next.js or http://localhost:5173/ for Qwik.
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.

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.

Register components

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.

Tip: 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.

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!