Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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, refer to the Developer Quickstart to integrate with other frameworks.

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@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.

After installing Builder Devtools, start your development server:

npm run dev

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

  1. 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.
  2. Click the Let's get started button.
  3. Choose a Space to authorize for integration and click Authorize.
  4. Click the Go to your app button.
  5. On the bottom right, click on the Builder logo to get to your components, settings, and adding 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.

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:

  1. Open the Devtools drawer by clicking on the Builder logo on the bottom right.
  2. Click Components to display all of the components, registered or not, in your code base.
  3. Select a component.
  4. 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!

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.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy