Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Using the Content Component

The Content component from Builder's Gen 2 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.

Required usage

When using Content you must specify:

  • model
  • apiKey
  • content

The following is an example of using these required props with Content:

<Content model="page" apiKey=YOUR_API_KEY content={contentJson} />

Props

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

Required props

model

required

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.

<Content model="page" />

For more information, visit Introduction to Models.

apiKey

required

The API key for your Builder.io account, required for fetching content.

<Content model="page" apiKey=YOUR_API_KEY />

For more information, visit Using Builder API Keys.

content

required

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

<Content model="page" content={ContentJSON} />

For more information, visit Content API.

Optional props

context

optional

Pass the context you want to pass to the Content component.

<Content context={myContext} />

canTrack

optional

A boolean to enable or disable tracking. Defaults to true.

<Content canTrack={true} />

customComponents

optional

Use to register custom components.

<Content customComponents={myCustomComponent} />

For more information, visit Registering Custom Components.

data

optional

Additional data to inject into your Builder content.

<Content data={{ key1: 'value1', key2: 'value2' }} />

For more information, visit Custom Data and Context.

enrich

optional

A boolean to enable or disable enriching API content. Enriching includes multi-level references in the response. Defaults to false.

<Content enrich={true} />

Tip: The enrich attribute only supports 3 layers of depth for nested references. For more information, see Fetch references and Symbols with enrich.

blocksWrapper

optional

The element that wraps blocks. Defaults to div (ScrollView in React Native).

<Content blocksWrapper="article" />

blocksWrapperProps

optional

Additonal props to pass to blocksWrapper. Defaults to {}.

<Content blocksWrapperProps={{ id: 'blocks-wrapper'}} />

contentWrapper

optional

Defines the wrapping element for the content. Defaults to div (ScrollView in React Native).

<Content contentWrapper="section" />

contentWrapperProps

optional

Additional props to pass to the contentWrapper element. Defaults to {}. As a best practice, be explicit regarding the element you'd like to apply contentWrapperProps with and use contentWrapper with contentWrapperProps.

The example below renders the content within a section element with the class name my-content.

<Content contentWrapper="section" contentWrapperProps={{ className: 'my-content'}} />

You can pass many other properties besides className. The contentWrapperProps prop is designed to accept a range of HTML attributes and custom properties that you might want to apply to the contentWrapper element.

The properties you can use depend on the type of contentWrapper element. For standard HTML elements, you can use any valid HTML attribute or React event handler. Some examples include:

<!-- style for inline styles --> <Content contentWrapper="div" contentWrapperProps={{ style: { color: 'blue', fontSize: '16px' } }} />
<!-- specifying ARIA attributes for accessibility --> <Content contentWrapper="div" contentWrapperProps={{ 'aria-label': 'Main Content' }} />
<!-- Adding event handlers --> <Content contentWrapper="div" contentWrapperProps={{ onClick: () => console.log('Clicked!') }} />

There are numerous properties you can pass with contentWrapperProps depending on your individual use case. For more information, visit MDN's HTML Attribute Reference.

locale

optional

Sets the locale for content rendering.

<Content locale="en-CA" />

For more information, visit Introduction to Localization.

linkComponent

optional

Provides a custom component for handling links throughout your Builder content. This prop is important for supporting client-side routing, preventing full Page reloads when navigating between Builder Pages.

The linkComponent provides a custom component for links for the Button component when provided a link, the Link URL field for any block, and the Link field for a column within the Columns block.

Here is an example for React:

// React example function CustomLink(props) { return <a {...props} /> }

Here's a Next.js example:

// Next.js example import Link from 'next/link' function CustomLink(props) { return <Link {...props} /> }

Then use it in the Content component:

<!-- Usage --> <Content linkComponent={CustomLink} />

Your custom link can receive all attributes that an HTML anchor tag, <a>, can receive, with href and target being the most common.

The linkComponent is equivalent to the renderLink prop in Gen 1 SDKs. For details, visit the renderLink entry in Using BuilderComponent.

What's next

For more information on fetching content, visit Content API.

Was this article helpful?