With the React SDK, you can use live previews to render edits in your data model without having to publish.
Although you can already fetch data models from Builder's Content API directly and use them as you would any other API resource, with the BuilderContent component, you can use features such as live editing, previewing, and A/B testing of your Data Models within the Builder Visual Editor, all while using standard JSX syntax.
To get the most out of this document, you should already be familiar with:
Live Previewing data models is currently supported in Builder's Gen 1 React SDK with active development in the Gen 2 React SDK. For details on the SDKs, read SDK Comparison.
Live previewing is a crucial feature when working with custom fields, data models, and structured data in Builder. It offers several benefits.
- Real-time updates: Display changes immediately in the Visual Editor without publishing.
- Improved user experience: Meet your user expectations with an intuitive experience.
- Efficient workflow: Iterate more quickly on your content and design.
- Accurate representation: Make sure your Sections, Pages, and structured data are exactly as intended before publishing.
Setting up live previewing properly can support a smoother experience where changes in custom fields, data models, or structured data update in real-time.
For more information on the variety of custom fields, visit Custom Fields.
