Issue with Symbol Inputs and Broken Layout in Visual Editor

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

Builder public api key

3e578a9c87e1489e861ba68d4f31be91

Detailed steps to reproduce the bug
We’re currently evaluating Builder.io as a potential solution for our company, and we’re running some tests to determine its suitability. However, we’re encountering several issues that are making it difficult to use the platform effectively.

One of the problems we’re experiencing is that when we use symbols with Builder components (we’re not using custom components at this stage), the visual editor displays a broken layout of our webpage, as shown in the attached screenshot.

From what I can gather, this issue seems to occur when I use Symbol inputs, specifically when I add bindings to elements to make the content dynamic. Unfortunately, we’re not seeing any error messages that would help explain this issue. However, upon reviewing the browser console, I notice a large number of errors and warnings, which may be related to the problem we’re experiencing.

I’d appreciate any guidance on how to resolve this issue or if there’s any additional troubleshooting steps we can take to identify the root cause.

Screenshots or video link

Code stack you are integrating Builder with
Remix

Reproducible code example

Hi @jorisre,

Welcome to the Builder.io forum post.

Could you please confirm which Builder SDK and its version you are using? We suspect that the issue might be related to the SDK or global CSS. Since you are developing the app locally, we are unable to investigate the issue.