You can skip manual integration and let Builder's Devtools handle the details for you.
Builder Devtools automatically integrates your app with Builder's Visual Headless CMS and provides an intuitive UI for registering components and managing content.
Currently, Builder Devtools supports integration with React, Next.js, Remix, and Qwik.
Need another framework? While we add more frameworks, refer to the Integrating Pages to integrate with other frameworks.
Make sure you have Node.js and npm (Node Package Manager) installed on your system.
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!
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.
