Introducing Builder Devtools
Tags: webdev, javascript, cms, tutorial
Published: 2023-07-24 07:40:54

Builder Devtools is a package to help you streamline the process of getting started with Builder’s Visual Headless CMS when starting a [Qwik](https://qwik.builder.io) project.

> 💡 Next.js support is in the works!

We are excited to introduce and share a closer look at Builder.io's Devtools. It’s all about improving the developer experience.

Currently, there are some prerequisites and steps to get Qwik integrated with Builder, but we want to make it even easier.

{% embed https://twitter.com/manucorporat/status/1671853205657903105 %}

## Installation and initial setup

To get started with a new Qwik project, run the following command:

```
npm create qwik@latest
```

> Note: You could alternatively use `pnpm` or `yarn`.

Choose Site with Visual CMS option:

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff5fb8d8448414c02a61bf06d2f6bdb66%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=f5fb8d8448414c02a61bf06d2f6bdb66&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>

This initializes a new Qwik application and gets your app ready for Builder’s Visual CMS initialization.

- Go to your project folder and run: `pnpm install` 
- Run: `pnpm run dev`
- Click the link that appears in your terminal

This opens your newly created app and starts the connection flow to Builder:

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6e06237b617648d68d20f68cc27168c4%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=6e06237b617648d68d20f68cc27168c4&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>

This takes you through Builder’s account creation process (in case you’re not signed up), and ends with authorizing your application.

This actually creates a .env file in your project filesystem and brings in the API key from Builder:

 ![Untitled](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fac7c0edcf544469ca6b7b787a5a2a52c?width=705)

After the celebration, you are ready to use Builder’s drag & drop UI inside your app!

How cool is that?!

## Registering components

One of the key features of our Visual CMS is the option to use the code and components you write inside your codebase and then use them inside of Builder’s UI. We call this “registering components”.

In the past, this required developers to register their components using the SDK and filling out the correct properties.

Now, with our new Devtools we’ve made this process easier.

You’ll notice a little icon on the bottom right — this is our Devtools drawer.

 ![Untitled](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd5a33d5afd2c4dabb622debeb71a5a31?width=705)

Clicking on it opens a drawer that displays all of your components, both registered and unregistered.

## User interface and functionality

The UI of the Devtools is designed for developers' convenience, providing a comprehensive view of all components and the ability to interact with them directly. This includes renaming, registering, and editing a component's inputs:

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd9ed2600a24d4758acfebf320216fc97%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=d9ed2600a24d4758acfebf320216fc97&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>
## The advantage of a dev server

The Devtools take advantage of having a dev server, offering read-write access to the file system and the ability to post content updates to [Builder.io](http://builder.io/) accounts. This helps developers to swiftly generate new content. Whether you're creating a blog, product page, or any other type of content, the tool enables you to accomplish it with just a button click:

<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F60653307a6f242829e263e8492fa473a%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=60653307a6f242829e263e8492fa473a&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>
## Potential integrations with other frameworks

We’re not stopping here. As we’ve mentioned, we're working on making the Devtools compatible with other JavaScript frameworks such as Next.js, SvelteKit, and Remix.

## Conclusion

[Builder.io](http://builder.io/)'s Devtools was created out of DX obsession and constant iterations. We want to provide a smooth experience for creating components and building web apps – all while tightening the collaboration between your whole product team.

If you're a developer looking to clear your marketing backlog tickets that consist of basic UI changes, it’s worth giving Builder a test drive.

Stay tuned for more insights and updates. Happy coding!

## Need help?

If you run into any trouble using this tool, please [join our Discord server](https://discord.com/invite/eDrWHeqnnQ).

 ![](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F83677fb912dd4a539a3f3bb5c0c82de1?width=405)<video muted autoplay loop playsinline controls>
      <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2F77cc5249f71948568195e7314bcc5766%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&amp;token=77cc5249f71948568195e7314bcc5766&amp;alt=media&amp;optimized=true" type="video/mp4">
    </source></video>

Visually build with your components

[Builder.io](https://www.builder.io/m/developers) is a headless CMS that lets you [drag and drop](https://www.builder.io/m/products) with [**your** components](https://www.builder.io/m/developers) right within your existing site.

[Try it out](https://builder.io/signup) [Learn more](/m/developers) 
```ts
// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])
```

##### _Read the [full post](https://www.builder.io/blog/builder-dev-tools) on the [Builder.io blog](https://www.builder.io/blog)_