Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

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

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:

  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!

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.

Deploy your updated app to a preview environment

Integrate Custom Components

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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy