Builder content link
http://localhost:3001/generic-3
Builder public api key
What? I need to post my API key to the forum?
What are you trying to accomplish
Integrate dev-tools with React prototype
Code stack you are integrating Builder with
React without a framework
I followed the tutorial example for integrating builder.io with my code base and it work file. I see the Builder button in the bottom right hand corner.
However the tutorial code is Next, but my code base is React without a framework. So I created a new prototype based on the tutorial prototype and got it (mostly) working (Using the Gen 1 SDK)
The part that is not working is the builder tools. There seems to almost no documentation on how to integrate dev-tools with base react. I used the code snippet I found on npm…
import { BuilderDevToolsPlugin } from "@builder.io/dev-tools/webpack";
module.exports = {
plugins: [new BuilderDevToolsPlugin()],
};
This doesn’t seem promising because while my code is indeed Webpack, the prototype is a simple create-react-app project.
So what am I doing wrong? Is it even possible to have the Build Button show up on a React without a framework?
Hi @AQuirky,
Thanks for reaching out.
You can definitely use DevTools with React by following the instructions here:
https://www.builder.io/c/docs/devtools
Just make sure to select “None” under the metaframework option to see the relevant documentation.
Also, could you please run the following command in your terminal:
npm init builder.io@latest
Let me know if you run into any issues—happy to help!
Best Regards,
Rahul Joshi
Did not work. Here are the steps I used. I created a new project.
$ npx create-react-app@latest landing_page_proto2 --template typescript
$ cd landing_page_proto2
$ npm init builder.io@latest
I got the following error…
Could not find a supported config file in this directory
│
│ Please cd into the root of a Next.js, Angular, Qwik or Remix project, or generate a new project to use this CLI.
│
│ Alternatively, see our docs for how to integrate with other frameworks:
│ Builder Developer Docs
│
◆ Would you like to generate a new project?
│ ● Yes, let’s generate a new project
│ ○ No, I’ll run again from another directory
Hi @AQuirky,
I appreciate your patience on this.
I’ve checked this on my end, and it appears that the feature works as expected with Webpack and Vite. However, it doesn’t currently function in a React setup. With that in mind, I would recommend submitting a feature request for React support at https://ideas.builder.io.
This sounds like a valuable enhancement, and our engineering team regularly reviews feature requests based on factors like overall benefit, technical feasibility, demand, and alignment with our roadmap. You’ll receive updates as your request moves through the review process.
I also encourage you to explore and vote on existing feature requests—your feedback plays a key role in shaping the future of Builder.
Thanks again for sharing your ideas with us!
Warm regards,
Rahul Joshi
Hi Rahul,
I’ve been looking closely at how Builder works client side. It seems it needs a client-side dev server. Looking at the tutorial, I see that client-side, it listens on http://localhost:5273. I used Fiddler to look at the traffic on this port and it seems that the first thing that happens is a block of JavaScript code is pulled from it. Most likely this is the code that implements the builder button.
GET http://localhost:5273/~builder-dev-tools.js
200 OK (application/javascript)
So it seems that in order to have the builder button I need to write a client-side plug-in to implement this protocol on port 5273. Where is the documentation for this protocol? I can’t seem to find it anywhere on your site. Is this something you need an enterprise license for? I expected to find it in the documentation on the builder dev tools, but it doesn’t seem to be there.
Hi @AQuirky,
I appreciate your patience on this.
Here’s the general documentation for plugins:
Intro to Plugins
We currently don’t have separate documentation specifically for private plugins. Just to clarify—using private pluginsdoes require a valid license, whereas public plugins do not.
If you have any questions while working on your plugin or need further guidance, feel free to reach out. We’re happy to help!
Best regards,
I saw the plugin documentation before but I did not think it was applicable to what I am trying to do. The first sentence on that page says “Plugins for Builder help you integrate a third-party service and customize nearly every part of Builder’s Visual Editor and models.”. The way the sentence is worded indicates the plugin is for your site (Builder.io) and not my site.
This is normally where plugins go. For Twilio Flex for example, when you make a plugin for Flex, to deploy it you upload it to Twilio.com and it is loaded into your Twilio Flex account.
Chrome plugins (i.e. extensions) are for Chrome and are therefore client-side. Note that they don’t call them Google extensions because that would mean they are server-side on Google.com.
This seems to be a consistent problem with all of your documentation. It is generally well written but you cannot read it closely because then you will discover that whoever is writing this does not really know how it works.
So if I understand you properly what you are saying is that I need to create a private plugin just so I can show the Builder button on the pages on my site that I want to edit. In order to do this I must pay much more then $39/user/month for the Enterprise plan. This seems excessive. After all I can simply require users to log into Builder.io to edit the pages. All the private plugin does is give me seamless integration, which is important but not worth $500/user/month or whatever “Custom Pricing” means.
