How to add custom components to custom models

Technical Questions
, ,
11

Perfect - yeah that is what I am getting at. If Builder is using the default page for editing, it is not connected to your site or components. So Builder needs to point to a page that has a <BuilderComponent /> on it and your components registered. So, a simpler example would be

  1. Create a new file in your project /pages/edit-builder-symbol.jsx with:
import { BuilderComponent } from '@builder.io/react';

// import where your custom components are registered
import './wherever-you-register-builder-components'

// This page is purely for using the Builder.io editor to edit symbols
export default function EditBuilderSymbol() {
  return <BuilderComponent model="symbol" />
}
  1. Then update your Editing URL for the symbol model to http://localhost:3000/edit-builder-symbol and save it

Now, when using the drag + drop editor for symbols, its going to hit your local site where your components are

Lmk if that helps explain ^