How do I use Builder with only the components I define?

Technical Questions
1

If you want to use Builder for React with only your custom components, and bundle nothing else, you are in luck! We have a lite version of our React SDK where you can choose to import only the components you want.

To use it, change all imports from @builder.io/react to @builder.io/react/lite

import { BuilderComponent } from '@builder.io/react/lite';

Additionally, you can choose to import only the built-in components you want:

import { BuilderComponent } from '@builder.io/react/lite';


// Register only the Columns Image components
import '@builder.io/react/dist/lib/src/blocks/Columns';
import '@builder.io/react/dist/lib/src/blocks/Image';

//...
<BuilderComponent model="page" />

Important notes

  • You must use components-only mode with our lite SDK
  • You must also disable the “allow built in components” option
  • You may need to create a custom insert menu for the components you want to include to show up Builder.set({ customInsertMenu: true }). See a full example and more info on this here
  • You must always import from @builder.io/react/lite. One accidental import to the root @builder.io/react will import and register all components again. You may want to consider using a webpack alias from "@builder.io/react": "@builder.io/react/lite" to avoid accidents