Builder.io Visual CMS Dev Tools

Setup and integrate Builder.io Visual CMS during development using the Dev Tools plugin. Dev Tools is integrated with a project's development through either a Vite plugin, or Webpack plugin.

Install Dev Tools

Builder's Dev tools can be installed and initialized using:

npm init @builder.io@latest

This command will update the config file (such as next.config.js, or vite.config.js) and install this package. Once installed, you can start your app's dev server, such as npm run dev.

Manual Installation

Alternatively, you can manually install Builder's Dev Tools, and update the config files following the steps below.

npm install -D @builder.io/dev-tools

Next step is to add the Dev Tools plugin to your build tool's config file. For example, if you're using Next.js, see the docs below on how to import and add the Dev Tools plugin to a Next.js app.

Next.js

Dev Tools with Next.js uses the webpack plugin added within the next.config.js file. Import BuilderDevToolsPlugin from @builder.io/dev-tools/webpack and add it to next's webpack config plugins array.

// next config file
const { BuilderDevToolsPlugin } = require("@builder.io/dev-tools/webpack");

const nextConfig = {
  webpack: (config) => {
    config.plugins.push(new BuilderDevToolsPlugin());
    return config;
  },
};

module.exports = nextConfig;

Vite

The Vite plugin for Dev Tools is meant for frameworks using Vite for its development. Currently, Dev Tools supports Qwik integrated with Vite. Import builderDevTools from @builder.io/dev-tools/vite and place it as the the first plugin to ensure it runs before others.

// vite config file
import { defineConfig } from "vite";
import { builderDevTools } from "@builder.io/dev-tools/vite";

export default defineConfig(() => {
  return {
    plugins: [builderDevTools()],
  };
});

Webpack

The Dev Tools webpack plugin is for React projects. If your project is using Next.js, please see the Next.js docs above on how to add the Dev Tools plugin to the next config. Below is a general webpack config for a React project.

// webpack config file
const { BuilderDevToolsPlugin } = require("@builder.io/dev-tools/webpack");

module.exports = {
  plugins: [new BuilderDevToolsPlugin()],
};