Building jsx visually?

Hi there,

Im new to and finding it very interesting. But I just want to understand it better. Please correct me here…

  1. is not about building jsx components visually like a html template builder. What I mean by this is, I don’t drag and drop html elements into a jsx file, add expressions to design it visually (obviously this means drag & dropping into javascript :grimacing:).

  2. Rather, once I code my components (jsx or in other frameworks) in my local environment, I (or my marketing team) can use them on (assuming Im already setup & connected), drag and drop to build the page & setup awesome workflows as needed with no lock-in. :clap:t5:

Am I understanding this correctly? Thanks in advance.

Hi @TechAkayy, Welcome to Forum!

Sorry to say but I guess you misunderstood how the builder works. Well, for starters I recommend you docs please once go through these below:

  1. How Builder works -
  2. How Builder works -

I hope these docs will add some clarity. If you have further questions, please let us know!

Thanks for your reply. Quoting the below from your first-link, I assume point-1 & point-2 in my original post is what I do in my local environment (code my components) and then builder comes into the picture “connecting” to my codebase using your SDKs & APIs which is covered in your second-link.

You control hosting

Builder pushes content to your site or app by connecting to your codebase. You control your site, code, and hosting–we only pass content to your site or application, rather than hosting it.

I’m interested in understanding builder’s scope (apart from integrating with your online page-builder) in our local dev workflow when coding our components, as covered in Jason Lengstorf’s episode with @steve here at 49:08.

Specifically if I update a component in my local environment (say in vs-code), does the “HMR” propagate and gets applied in the online builder, or will it trigger an “auto-reload”? Thanks!

Hi @TechAkayy, Thanks for looking at those docs and for continued interest in

Yes that’s right! Our APIs/SDKs allow you to use any framework to register your components with Builder. Then you can connect your codebase to your Builder space with its API key.

Builder’s preview iframe supports HMR so if this is configured in your local development environment, whenever you update a component’s file the Visual Editor will reflect the changes without a hard refresh. Frameworks like Next.js, Vue, etc have their own implementation of HMR so you can see this effect in action with one of our starters like the one linked below!’s Next.js Starter

If you have further questions,let us know!

Thanks bunch for the detailed reply. I will dive deep into docs. Cheers!

Welcome! if you have further questions, feel free to reach out again.