in beta
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, Qwik, Remix and Hydrogen.
Need another framework? While we add more frameworks, please use our quickstart doc to integrate with any stack.
Make sure you have Node.js and npm (Node Package Manager) installed on your system.
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:
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@latestWhen prompted, respond Yes to integrating with Builder.io:
After installing Builder Devtools, start your development server:
npm run devWith 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 orhttp://localhost:5173/for Qwik. - Click the Let's get started button.
- Choose a Space to authorize for integration.
- Click the Go to your app button.
- On the bottom right, click on the Builder logo to load your site.
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.
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.
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!
For more detailed information on registering custom components in Builder, read Integrating Custom Components.
Looking to hire a third party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.
