Creating and using symbols

Technical Questions
1

Builder content link

Builder public api key
ab24932172a5427f981ba9d6a9b615a6

What are you trying to accomplish
I’m attempting to create a symbol and configure it. It creates fine but when I edit it directly the visual builder doesn’t seem to operate correctly.

This is definitely more of a technical question. I suspect the URL for the visual builder isn’t pointing to the correct location. This may be a gap in documentation because it’s not totally clear how to set this up with your framework.

To confuse things more I’m using SolidJS and Solid Start which is a bit more of a custom stack, so I’m not sure if this is a bug with the rendering library/SDK.

Either way I do need some guidance to either patch the bug or understand how the visualizer operates in this context. :slight_smile:

Screenshots or video link

Here’s a Loom of me adding my header, creating a symbol and trying to use the visualizer: Loom | Free Screen & Video Recording Software.

What you can see happening the preview link (which I’ve overwritten with my localhost) isn’t displaying anything and adding my Header component in doesn’t seem to work.

Code stack you are integrating Builder with
solid-start (0.1.0-alpha.89)
@builder.io/sdk-solid (0.0.8-11)

Reproducible code example

Reproduction is difficult to provide but I can grant access to the repository to anyone interested.

2

Hi @davedbase, can you share access to your code with me so that I can take a look?

3

Sure, what’s your Github handle?

4

Hi @davedbase, I just messaged you. Please let me know if you can’t find that.

5

Hi @davedbase, thanks for sharing that! It looks like you need to change the RenderContent model type from “page” to “symbol” to be able to preview the symbol in the editor.

6

Oh wow…that was a one line fix. So the next obvious questions I have is: where is this documented and how do I get my hands on it? I feel like I’m flying blind with an understanding of the SDK. Perhaps the React docs since they’d likely be very similar?

7

The next issue is how come the symbol doesn’t render properly in the homepage itself?

8

Hi @davedbase, it seems like this issue is related to using a custom component as a symbol. We are investigating this and will get back to you soon.

I’m sorry that it feels like flying blind at the moment. Because this is a newer SDK, using the React SDK docs is the best resource as we work on documentation for this.

9

No worries! I’m using a very bleeding edge stack and so that comes with inherent risks :slight_smile: thanks!