Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

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.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy