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.
When using Content you must specify:
modelapiKeycontent
The following is an example of using these required props with Content:
<Content
model="page"
apiKey=YOUR_API_KEY
content={contentJson}
/>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
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.
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.
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
Pass the context you want to pass to the Content component.
<Content context={myContext} />optional
A boolean to enable or disable tracking. Defaults to true.
<Content canTrack={true} />optional
Use to register custom components.
<Content customComponents={myCustomComponent} />For more information, visit Registering Custom Components.
optional
Additional data to inject into your Builder content.
<Content data={{ key1: 'value1', key2: 'value2' }} />For more information, visit Custom Data and Context.
optional
A boolean to enable or disable enriching API content. Enriching includes multi-level references in the response. Defaults to false.
<Content enrich={true} />For more information, visit Fetching Content with enrich={true}.
optional
The element that wraps blocks. Defaults to div (ScrollView in React Native).
<Content blocksWrapper="article" />optional
Additonal props to pass to blocksWrapper. Defaults to {}.
<Content blocksWrapperProps={{ id: 'blocks-wrapper'}} />optional
Defines the wrapping element for the content. Defaults to div (ScrollView in React Native).
<Content contentWrapper="section" />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.
optional
Sets the locale for content rendering.
<Content locale="en-CA" />For more information, visit Introduction to Localization.
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.
For more information on fetching content, visit Content API.
