Adding code to the visual builder template components

Builder content link

Builder public api key
caf72d82937b47ce891866e56a3aec0f

What are you trying to accomplish
Just successfully connected my project to builder and added some component in my code, which I can add as a code component.
Now I would like to use the visual builder components like buttons and input fields in my tsx code.
Really like your templates.
I know i can give them some event/state in the editor, but nothing complex.
Is there any possibility?

Code stack you are integrating Builder with
react/typescript

hi @saturas , welcome to the Builder Forum!

Could you explain more your exact intended use case? It is possible to pull components from Builder into your code base, but I want to make sure we are doing it in the best way.

One way would be to just create a section model with a content layout from builder (could be an entire section of your site, or just a single element). This way you could still have some flexibility to edit the section within Builder as it lives on your page.

You could also create a symbol of the element you want to use, and pull that into the page either as a <BuilderComponent/> or as the html element directly from our HTML API. Using a Symbol will make that element universally editable, meaning if you ever change within the source Symbol in Builder, it should reflect in all instances of that symbol, which could also be useful

Try one of these out! Let us know if that works for you, or if you think your usecase is different we can try to find something else that could achieve your goals