Im new to builder.io and finding it very interesting. But I just want to understand it better. Please correct me here…
Builder.io 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 ).
Rather, once I code my components (jsx or in other frameworks) in my local environment, I (or my marketing team) can use them on builder.io (assuming Im already setup & connected), drag and drop to build the page & setup awesome workflows as needed with no lock-in.
Am I understanding this correctly? Thanks in advance.
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 Builder.io
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!
).