Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
e.g. Builder.io: Visual Development Platform
Builder.io: Visual Development Platform
Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key
e2f096ba17f74dfd9c140ac050f349a4
What are you trying to accomplish
e.g. I want to integrate builder on a landing page
I am having difficulties with getting consistent data back when previewing my content in the builder IO platform.
See the output of the callback of the BuilderContent component when previewing:
[
"<p>fdsfdsfadsfadsfadsfadsftfghfghfg</p><h2>Test Section</h2><p>dfddsfsdfdsfds</p><p>dsfdsfds</p>",
false,
{
"postId": 3223423,
"title": "Test Blog Post",
"publishDateGmt": "Wed Jan 10 2024 00:00:00 GMT-0500 (Eastern Standard Time)",
"authorId": 2,
"content": "<p>fdsfdsfadsfadsfadsfadsftfghfghfg</p><h2>Test Section</h2><p>dfddsfsdfdsfds</p><p>dsfdsfds</p>",
"readingTime": "56",
"featuredImage": "https://cdn.builder.io/api/v1/image/assets%2Fe2f096ba17f74dfd9c140ac050f349a4%2F7f032c3d27374772b4a585e50950465a",
"lastModifiedDateGmt": "Wed Jan 10 2024 00:00:00 GMT-0500 (Eastern Standard Time)",
"authorName": "KC",
"categories": [
{
"category": {
"@type": "@builder.io/core:Reference",
"model": "categories",
"id": "59af3be58ce34979b22f1c4ab68649c4",
"value": {
"createdDate": 1704416561124,
"data": {
"name": "Vacation Rentals",
"description": "Vacation rentals can be an excellent real estate investment with low barriers to entry and many tax benefits. Learn more about this high-yielding class of real estate investment.",
"categoryId": 21,
"slug": "vacation-rentals"
},
"modelId": "a363db7663e24fb6aa46372f8e905b62",
"name": "Vacation Rentals",
"id": "59af3be58ce34979b22f1c4ab68649c4",
"query": [],
"published": "published",
"rev": "4p7z2ncyild"
}
}
}
],
"excerpt": "21321312312312",
"slug": "test-slug",
"blocks": [
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-8daec9bb49444666a0ec060cc19dc9c7",
"component": {
"name": "Symbol",
"options": {
"symbol": {
"data": {},
"model": "symbol",
"entry": "51203953bafc42379ad3fdeca1518e8e",
"content": {
"lastUpdatedBy": "0mmVKJXQxgchlV3auwr4Vp40oug1",
"folders": [],
"data": {
"blocks": [
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-9884abc14d634d0292862a00d40268cf",
"meta": {
"previousId": "builder-dc99e1e751474da69514ee6deb3bc0e8"
},
"children": [
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-674e51d326b348208b47847d74ea9fb5",
"meta": {
"previousId": "builder-a8b02beafd4e4515b9005435a01b826e"
},
"component": {
"name": "Text",
"options": {
"text": "Enter some text..."
}
},
"responsiveStyles": {
"large": {
"display": "flex",
"flexDirection": "column",
"position": "relative",
"flexShrink": "0",
"boxSizing": "border-box",
"marginTop": "20px",
"lineHeight": "normal",
"height": "auto"
}
}
},
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-9968c8378b38463db9481a5cc82d6b23",
"animations": [
{
"trigger": "pageLoad",
"animation": "fadeInUp",
"steps": [
{
"id": "1b2eca775c514ad8a3992bf4510d1a5b",
"isStartState": false,
"styles": {
"opacity": "0",
"transform": "translate3d(0, 20px, 0)"
},
"delay": 0
},
{
"id": "9fbf7e6cc4d848f895666c746fa3adc7",
"isStartState": false,
"styles": {
"opacity": "1",
"transform": "none"
},
"delay": 0
}
],
"delay": 0,
"duration": 2,
"easing": "cubic-bezier(.37,.01,0,.98)",
"repeat": false,
"thresholdPercent": 0
}
],
"meta": {
"previousId": "builder-8c97f29fe8ee40ac847ea90a1e730b6f"
},
"component": {
"name": "Core:Button",
"options": {
"text": "Click me!",
"openLinkInNewTab": false
}
},
"responsiveStyles": {
"large": {
"display": "flex",
"flexDirection": "column",
"position": "relative",
"flexShrink": "0",
"boxSizing": "border-box",
"marginTop": "20px",
"appearance": "none",
"paddingTop": "15px",
"paddingBottom": "15px",
"paddingLeft": "25px",
"paddingRight": "25px",
"backgroundColor": "black",
"color": "white",
"borderRadius": "4px",
"textAlign": "center",
"cursor": "pointer"
}
}
},
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-d57a005da69f4e7bb15c93432c721601",
"animations": [
{
"trigger": "pageLoad",
"animation": "fadeInUp",
"steps": [
{
"id": "26f999db1ca942b1b6cfe3e947f04fd6",
"isStartState": false,
"styles": {
"opacity": "0",
"transform": "translate3d(0, 20px, 0)"
},
"delay": 0
},
{
"id": "c177ef065d754c969ef9f566a0f3b1f8",
"isStartState": false,
"styles": {
"opacity": "1",
"transform": "none"
},
"delay": 0
}
],
"delay": 0,
"duration": 3,
"easing": "cubic-bezier(.37,.01,0,.98)",
"repeat": false,
"thresholdPercent": 0
}
],
"meta": {
"previousId": "builder-55c2d294155d4d368a638e2698864d6a"
},
"component": {
"name": "Image",
"options": {
"image": "https://cdn.builder.io/api/v1/image/assets%2Fe2f096ba17f74dfd9c140ac050f349a4%2F56dd4c4dde9e4698a49ae5aa0e25bcde",
"backgroundSize": "cover",
"backgroundPosition": "center",
"lazy": false,
"fitContent": true,
"aspectRatio": 1.499,
"lockAspectRatio": false,
"height": 1300,
"width": 867
}
},
"responsiveStyles": {
"large": {
"display": "flex",
"flexDirection": "column",
"position": "relative",
"flexShrink": "0",
"boxSizing": "border-box",
"marginTop": "20px",
"width": "100%",
"minHeight": "20px",
"minWidth": "20px",
"overflow": "hidden"
}
}
}
],
"responsiveStyles": {
"large": {
"display": "flex",
"flexDirection": "column",
"position": "relative",
"flexShrink": "0",
"boxSizing": "border-box",
"marginTop": "20px",
"height": "auto",
"paddingBottom": "30px"
}
}
},
{
"id": "builder-pixel-nata4ys8xn",
"@type": "@builder.io/sdk:Element",
"tagName": "img",
"properties": {
"src": "https://cdn.builder.io/api/v1/pixel?apiKey=e2f096ba17f74dfd9c140ac050f349a4",
"aria-hidden": "true",
"alt": "",
"role": "presentation",
"width": "0",
"height": "0"
},
"responsiveStyles": {
"large": {
"height": "0",
"width": "0",
"display": "inline-block",
"opacity": "0",
"overflow": "hidden",
"pointerEvents": "none"
}
}
}
],
"state": {
"deviceSize": "large",
"location": {
"path": "",
"query": {}
}
}
},
"modelId": "ca48cef4aaa7439e8d79a5d404bad39e",
"query": [],
"published": "published",
"screenshot": "",
"testRatio": 1,
"createdDate": 1704300206329,
"createdBy": "0mmVKJXQxgchlV3auwr4Vp40oug1",
"meta": {},
"variations": {},
"name": "Common Blog Post Sidebar",
"id": "51203953bafc42379ad3fdeca1518e8e",
"rev": "j0ho6ldhj5"
}
}
}
}
},
{
"id": "builder-pixel-l6znpxlfogk",
"@type": "@builder.io/sdk:Element",
"tagName": "img",
"properties": {
"src": "https://cdn.builder.io/api/v1/pixel?apiKey=e2f096ba17f74dfd9c140ac050f349a4",
"aria-hidden": "true",
"alt": "",
"role": "presentation",
"width": "0",
"height": "0"
},
"responsiveStyles": {
"large": {
"height": "0",
"width": "0",
"display": "inline-block",
"opacity": "0",
"overflow": "hidden",
"pointerEvents": "none"
}
}
}
],
"state": {
"deviceSize": "large",
"location": {
"pathname": "/blog-v2/test-slug",
"path": [
"blog-v2",
"test-slug"
],
"query": {}
}
},
"data": "<p>fdsfdsfadsfadsfadsfadsftfghfghfg</p><h2>Test Section</h2><p>dfddsfsdfdsfds</p><p>dsfdsfds</p>",
"variationId": null,
"testVariationId": null,
"testVariationName": "Default variation"
}
]
This is an array of the response where the first element is the first param; why is the first param a string of just the “content” field when previewing? From my understanding, the docs, and when I am not previewing, it is the full model’s content filled out with variations resolved.
See how the title does not update with the new title in the menu.
Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
NextJS
Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
Not much to give here but this is the BuilderContent object where I am logging out the responses. Like I said earlier, the first param resolvedData is correct when not previewing but is just the content field when previewing and I am not sure why. It breaks the preview entirely 
:
<BuilderContent
content={article}
options={{
options: {
includeRefs: true,
},
}}
model="blog-article"
>
{(...test) => {
console.log('params', test);
const [resolvedData, loading, fullData] = test;
if (loading) return;
console.log('fullData', fullData);
console.log('resolvedData', resolvedData);
console.log('isPreviewing', isPreviewing);
const data = resolvedData;
console.log(data);