How do I edit my react js app in builder.io?

Technical Questions
1

Hey there guys :slight_smile:

I have just discovered builder so of course jumped right in :slight_smile: but perhaps I have misunderstood how I can use it. Can I use builder.io as a visual editor for my react js app?

I have installed builder into my project and am importing it into index.js like so:
import { builder } from ‘@builder.io/react’;
builder.init(process.env.BUILDER_API_KEY);
require(‘dotenv’).config();

I have created a .env file and have used my public key
then I went to builder.io and fetched my localhost url and it’s there, but just not editable. So must be missing something and perhaps a lot? :slight_smile:
thanks in advance
Linda

2

Hey Linda,

:wave: Thanks for reaching out and welcome to Builder! If you can send me your Builder page url, I’d be happy to dive in further. It sounds like you’ve taken the correct steps to integrate Builder into your react app, but you’ll also want to make sure you connect it in Builder as well following this guide.

3

@kara thanks a mil for answering so soon :slight_smile:
This is definately happening because I forgot to add the following but when I try and add it to my index.js I get the following error.

builder.io parsing error
builder.io parsing error1418×190 12 KB
:

this is the code i am trying to add…might you be able to tell me where I should add it in my code? :slight_smile:

export const getStaticProps = async (context) => {
  const content = await builder.get('page', { url: context.resolvedUrl }).promise();

  return { 
    props: { content }, 
    revalidate: true,
    notFound: !content
  }
}

export default const MyComponent = (props) => (
  <BuilderComponent
    content={props.content}
    model="page" />
)
4

Hey @creativemac , to fix the error above change the default export to

export default function MyComponent(props) {
  return <BuilderComponent content={props.content} model="page"/>
}

We have plenty of examples for Next.js, including our own marketing site, please refer to the list here for up-to-date examples and starters

5

hey there @aziz :slight_smile: thanks a mil for helping me out :slight_smile: :slight_smile: after messing up a few times because I kept forgetting to delete the old code I got the site to run with the follwing code in my index.js
I added a new page to my builder.io dashboard and plottet in:
localhost:3000/builder-editing in the preview url + I activated the proxy. The page I want does render, but I cannot edit it.

what might I be missing?
’
import React from “react”;
import ReactDOM from “react-dom”;
import { createBrowserHistory } from “history”;
import { Router, Route, Switch } from “react-router-dom”;

    import "assets/scss/material-kit-react.scss?v=1.9.0";

    // pages for this product
    import Components from "views/Components/Components.js";
    import LandingPage from "views/LandingPage/LandingPage.js";
    import ProfilePage from "views/ProfilePage/ProfilePage.js";
    import LoginPage from "views/LoginPage/LoginPage.js";
    import SectionBasics from "./views/Components/Sections/SectionBasics";
    import {builder, BuilderComponent} from '@builder.io/react';
    builder.init(process.env.BUILDER_API_KEY);
    require('dotenv').config();

    export default function MyComponent(props) {
        return <BuilderComponent content={props.content} model="page"/>
    }


    var hist = createBrowserHistory();

    ReactDOM.render(
      <Router history={hist}>
        <Switch>
            <Route path="/my-test" component={SectionBasics} />
          <Route path="/landing-page" component={LandingPage} />
          <Route path="/profile-page" component={ProfilePage} />
          <Route path="/login-page" component={LoginPage} />
          <Route path="/" component={Components} />
        </Switch>
      </Router>,
      document.getElementById("root")
    );

thanks in advance
Linda

6

Hey Linda, make sure you’re on the latest stable release of the @builder.io/react package. At the moment it’s 1.1.40

7

Hi @aziz :slight_smile: I was on 1.1.41 so changed the versioni to 1.1.40 but still I can only preview the site not edit on http://localhost:3000/builder-editing. Perhaps I can have you guys take a look at what I am doing wrong if I jump on the basic plan? :wink:

8

Hey @creativemac! Would you mind sending us your public API key, and if you could create a CodeSandbox with some minimal code that reproduces/triggers the problem and send the link to us, that could help us a lot. Thank you!

9

If you’re using Builder Io to visually React develop apps with drag-and-drop, you can tailor visual components for your team by using custom React components.
You can create any component your team requires in Builder, configure options for variability, and your teammates can use and reuse your components throughout the app. Freeing up developer time while allowing non-coding team members to iterate and publish on their own boosts efficiency and encourages creativity throughout the team.