How to add components dynamically in the Visual editor?

Visual Editor Help
1

I have Components 1-3 deployed in my Next.js app. Suppose If I want
to add Component 4 to pages via the Visual Editor without redeploy.

Is this possible? What’s the best practice for allowing clients
to add components dynamically after the site goes live?

2

Hello @Srivathsa1503,

Yes, it is possible to add new components dynamically to your site without the need for redeployment by using Builder.io’s custom components. Here’s how you can achieve this:

  1. Register Your Components: First, ensure that all components, including Component 4, are registered in Builder.io. When you register a component, it becomes available in the Builder Visual Editor. Registration involves specifying the component and any inputs or properties that can be edited in the Visual Editor.

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

Builder.registerComponent(MyComponent, {
  name: 'MyComponent',
  inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello, Builder!' }],
});

  2. Expose Components in Visual Editor: Once registered, components can be used by non-developer team members. These components will show up in the Visual Editor, allowing team members to drag and drop them onto pages.

  3. Dynamic Rendering: Ensure your app is set up to render components dynamically. This might mean configuring your code to handle different components that users drag onto pages without needing specific imports for each one.

  4. Use BuilderComponent for Rendering: Utilize <BuilderComponent /> from the Builder SDK to dynamically render content, including any new components added via the Visual Editor. This component fetches the appropriate content based on the model and renders it, ensuring that any newly added components are displayed correctly.

Here is a simplified example of rendering Builder content in a Next.js page:

// pages/[...page].tsx
import { RenderBuilderContent } from "../components/builder"; // Custom render function

export default async function Page({ params }) {
  const model = "page";
  const content = await builder.get(model, {
    userAttributes: {
      urlPath: "/" + (params.page?.join('/') || ''),
    },
  }).toPromise();

  return content ? <RenderBuilderContent model={model} content={content} /> : <div>Page not found</div>;
}
  1. Continuous Updates and Publishing: Clients can use the Visual Editor to add or modify pages with registered components without redeployment. Changes are instantly live once published in Builder.io, letting you iterate quickly.

Hope this helps!

Thanks,