Issue passing data with the HTML API

Bugs
1

I’m following this post on passing values through the HTML API:

However, when I do this, the values don’t properly render. The correct values do render for a second, but then is replaced with undefined.

Seeing that this post was created back in March of 2021, is this feature still supported?

Code stack you are integrating Builder with
REST API

Reproducible code example
Example URL:

https://cdn.builder.io/api/v3/html/homepage?apiKey=df8e07d26b2f44ee9ee861afdbfa10c2&data.availRewards=a&data.pendRewards=b&url=%2Fhomepage

Looking at the resulting HTML, it looks like the data value is passed to the options attribute as JSON string, and in the console the JSON payload has the data property converting the JSON string into an object instead of parsed as JSON:

{
    "0": "{",
    "1": "\"",
    "2": "a",
    "3": "v",
    "4": "a",
    "5": "i",
    "6": "l",
    "7": "R",
    "8": "e",
    "9": "w",
    "10": "a",
    "11": "r",
    "12": "d",
    "13": "s",
    "14": "\"",
    "15": ":",
    "16": "\"",
    "17": "a",
    "18": "\"",
    "19": ",",
    "20": "\"",
    "21": "p",
    "22": "e",
    "23": "n",
    "24": "d",
    "25": "R",
    "26": "e",
    "27": "w",
    "28": "a",
    "29": "r",
    "30": "d",
    "31": "s",
    "32": "\"",
    "33": ":",
    "34": "\"",
    "35": "b",
    "36": "\"",
    "37": "}"
}
2

Hi cyu,

It looks like the data parameter is being serialized as a string and then treated like an object (character by character) instead of being properly parsed as JSON. That’s usually why you briefly see the correct value before it becomes undefined , the hydration process likely overwrites it when it can’t parse the structure correctly.

You might want to double-check how the data object is being encoded in the query string. In some cases, explicitly JSON-stringifying the object and ensuring proper URL encoding before passing it can prevent this issue. Also, verify whether the latest HTML API version still expects nested data.* parameters or a full data JSON payload.

I ran into a similar serialization issue before and documented a workaround on this website, where parsing the payload manually before hydration resolved the undefined override.

It would also be good to confirm whether Builder has updated how state bindings work since 2021, there may have been changes to how the HTML API handles dynamic data injection.

Hope this helps point you in the right direction!