Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

The BuilderComponent from Builder's Gen 1 SDK is how you specify where in your app you want to feature Builder content. It offers a number of props to help you specify exactly what to render in your integrated app.

When using BuilderComponent :

  • You must specify the model.
  • We highly recommend that you also pass content.
<BuilderComponent model="page" content={contentJSON} />

Props are key to customizing component behavior and managing content. With BuilderComponent props, you can define how the component interacts with Builder, control content sources, and pass necessary data or context.

required

Alias: modelName

Use to specify the name of the Builder model whose content this component is rendering. This is often a Page or Section model. If you had a model named announcement-bar, for example, you'd pass that in. In this example, the model is page.

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

For more information, visit Introduction to Models.

optional but recommended as a best practice

Explicitly specify the Builder content JSON object to render. Helpful for server-side rendering or custom content fetching logic.

<BuilderComponent model="page" content={contentJSON} />

For more information, visit Content API.

optional

Use to pass custom data into the rendered Builder content. This is an object containing data passed to the Builder component, accessible in the Visual Editor. Enables dynamic content rendering by passing different data based on application state or user interaction.

  <BuilderComponent model="page" data={{ myVar: 'Hello' }} />

optional

Use to provide an object available in actions and bindings inside Builder.io. Helpful for passing additional context or global data for use in Builder.io's actions and data bindings.

<BuilderComponent model="page" context={{ user: 'Marie Lorenzo' }} />

optional, for advanced use cases

Set to true to prevent event.stopPropagation() in the Visual Editor. This method is essential in scenarios where the default event propagation behavior interferes with intended interaction.

<BuilderComponent model="page" stopClickPropagationWhenEditing={true} />

Helpful for advanced content handling and user interaction, BuilderComponent methods handle events and actions for advanced control and interactivity.

optional

A callback function that is invoked when the Builder content is successfully loaded. Helpful for adding logic or state updates on load.

<BuilderComponent 
  model="page" 
  contentLoaded={(data, content) => console.log('Content loaded!', content)} 
/>

optional

A callback function that is invoked if an error occurs while fetching the content. Provides a way to handle errors gracefully, such as displaying a user-friendly message or fallback content.

<BuilderComponent 
  model="page" 
  contentError={(error) => console.error('Error loading content', error)} 
/>

optional

A callback that runs when the Builder state changes, like from user interactions or dynamic content updates. In this way, your app can respond to dynamic changes in the application state for more interactive and responsive user experiences.

<BuilderComponent 
  model="page" 
  onStateChange={(newData) => console.log('State changed', newData)} 
/>

optional

Use for custom rendering of links with client-side Single Page Applications (SPAs) like Next.js or Gatsby. Integrates Builder content with client-side routing.

<BuilderComponent 
  model="page" 
  renderLink={(props) => <CustomLink {...props} />} 
/>

While legacy props like builder, entry, and options are part of the component's history, their usage is no longer recommended. For optimal performance, use the content prop in conjunction with server-side data fetching with builder.get() as documented in Content API and in the Querying Cheatsheet.

Theses legacy props are provided here only for reference.

A specific instance of the Builder class.

<!-- DO NOT USE -->
<BuilderComponent builder={customBuilderInstance} />

The content entry ID to fetch for rendering.

<!-- DO NOT USE -->
<BuilderComponent model="page" entry="your-entry-id" />

Options for fetching content, including custom targeting and query parameters.

<!-- DO NOT USE -->
<BuilderComponent 
  model="page" 
  options={{ cachebust: true }} 
/>

For more information on fetching content, visit Content API.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy