Register aReact component with props that can be edited in the builder dashboard

Hello! I’m trying to establish a proof-of-concept using React that will allow me to register a React component in Builder with props that be designed in builder but are restricted to specific use cases (we want to restrict editing the content in the dashboard).

I have created a React app, installed builder dependencies, and have initialized builder in the index.js. I have a page registered in builder and it is displaying my page in the dashboard, but the content isn’t editable. I’m not entirely sure how to establish default values for something in a page, or a component being used in a page, and how to connect that to content that can be edited in the dashboard.

Any help is appreciated, thank you!

Hey, thanks for reaching out! If you can create a small example repo or code sandbox, that would help us take a look at your integration. Thanks!

Here is a sandbox of my repo: react - CodeSandbox

I have registered the components in the builder dashboard and am able to get them loaded there. I have the builder chrome extension and I can see that my content is registered in builder with the blue outline, however I don’t get an edit button that takes me to the builder dashboard.

Where I’m at now is I want to first verify that I can edit and manage the coded content directly in the builder dashboard, but I’m not seeing the blue edit button in the deployed site on localhost. I am 1. not sure that I am connecting the code and the dashboard correctly and 2. not sure how to establish default values in the code, have that rendered on the deployed site, and then edit that content directly in the dashboard.

One of the disconnects for me is that when I’m looking at the example repos in the builder github, I can deploy the site and see the beautiful working examples, but I’m unable to see how the components are registered in the dashboard and make the connections between the code and how to manage that in the dashboard. Is there a way to allow new builder users access to the deployed example site’s builder dashboard to gain a more complete understanding? When I click the edit button, I am taken the dashboard where a popup displays a “Content entry not found” message. I have attached a screenshot for reference.

Thank you so much for your help! I’m really looking forward to learning more about builder and implementing it for my employer’s website.

Hi @rdonahue,
There’s a couple of issues in the sandbox you sent:

  • No need to register header with a builderComponent as a custom component, you can use a Symbol directly in content for that, or you can just use the BuilderComponent in code, I adjusted the codesandbox here long-morning-kfc8f - CodeSandbox , hopefully it’ll make it a bit clearer how builder works.
  • Example starters are designed to work with it’s framework ( nextjs , gatsby), and have instructions on each on how to get started.
  • Edit button not showing is an intermittent bug in the chrome extension that we have a fix for coming soon.
  • Can’t give you access to the demo site content, but you can spin your own clone, using the builder cli from the starter folder where we have all the models/content committed and ready for you to use.

Finally, if you are looking for guidance on integration approach, please reach out to the support and share your use case and we’ll happily guide you through it.

1 Like

Hi Aziz,

Thanks for your help! I have tried to clone the react-design-system example and followed the steps outlined in the readme, which is to sign in to builder, create a new page, then clone and start the project. I have created a new test space and created a new private key. I navigate to the stated folder and enter builder create -k [private-key] -n [space-name] -d where I get an error: builder command not found. Can you help with this error?

Just checking on the status of this question…

Have you installed it with npm globally?

npm install -g @builder.io/cli

If so, then it’s an issue of missing global node modules, is this the case for all your globally installed modules or just builder?

Either way I think you could find a fix by following the accepted answer here node.js - Global Node modules not installing correctly. Command not found - Stack Overflow to fix the issue, if it continues, you can always just install it locally and add it as a script to your package.json. Hope this helps.

Thank you, that was a success. I have encountered the following error after successful installation of the cli:


I have navigated to .nvm/versions/node/v15.3.0/lib/node_modules/@builder.io/cli/node_modules/graphql-typed-client/dist/client/createClient.js and examined the file. Can you help me understand which organization would be considered the root? We have a handful of test spaces, but I believe this is referring to the organization itself. However I cannot find a way to generate a private key unless I am within one of our spaces. I have generated this key within the reactDesignSystem space that I have set up, which is one of 5 spaces.

Thank you!

Please check the answer to a similar issue here Error on using builder create command - #2 by aziz