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 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:

  • 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 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 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.

<Content linkComponent={CustomLink} />

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