# Can't get the symbols and pages to properly sync with visual builder

**URL:** <https://forum.builder.io/t/cant-get-the-symbols-and-pages-to-properly-sync-with-visual-builder/4544>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [November 27, 2023, 1:26am UTC](https://forum.builder.io/t/cant-get-the-symbols-and-pages-to-properly-sync-with-visual-builder/4544 "2023-11-27T01:26:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![CreditCurve.ai](https://avatars.discourse-cdn.com/v4/letter/c/48db29/32.png) [@CreditCurve.ai](https://forum.builder.io/u/CreditCurve.ai)\
**Post date:** [November 27, 2023, 1:26am UTC](https://forum.builder.io/t/cant-get-the-symbols-and-pages-to-properly-sync-with-visual-builder/4544/1 "2023-11-27T01:26:02Z")

</div>

Website: [http://creditcurve.ai/](http://creditcurve.ai/) (please use http)

I have been trying to get this to properly link so I can create new pages with the Visual Builder but I can only get a single page to render

Essentially when I’m using code provided by you from git, then I use my API key and connect it to the [builder.io](http://builder.io) then I write code in my react-app this code is not editable when it’s loaded on [builder.io](http://builder.io). but the rest of the page will be editable on the [builder.io](http://builder.io).

I have read blogs as well and registered custom components but when it’s loaded on [builder.io](http://builder.io) it remains uneditable.

Any advice would be greatly appreciated.

```auto
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { BuilderComponent } from '@builder.io/react';
import './index.css';

export default function App() {
  return (
    <BrowserRouter>
      <header>
        <div className="logo">MY SITE</div>
        <div className="links">
          <Link className="link" to="/">
            Home
          </Link>
          <Link className="link" to="/about">
            About
          </Link>

          <Link className="link" to="/404">
            404
          </Link>
            <input type={'text'} />
        </div>
      </header>
      <div className="App">
        <Routes>
          <Route path="/" element={<BuilderPage model="page" /> }/>
          <Route path="/404" element={<NotFound />} />
          {/* Add more Route components as needed */}
        </Routes>
      </div>
    </BrowserRouter>
  );
}

const BuilderPage = ({ model }) => (
  <BuilderComponent apiKey="xyz" model={model}>
    <div className="loading">Loading...</div>
  </BuilderComponent>
);

const Home = () => <h1>I am the homepage!</h1>;
const About = () => <h1>I am the about page!</h1>;
const NotFound = () => <h1>No page found for this URL, did you publish it?</h1>;

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 27, 2023, 3:48am UTC](https://forum.builder.io/t/cant-get-the-symbols-and-pages-to-properly-sync-with-visual-builder/4544/2 "2023-11-27T03:48:43Z")

</div>

Hello @CreditCurve.ai,

Regarding your header component code, it won’t be directly editable within the builder. To make it editable, you’ll need to register it as a [custom component](https://www.builder.io/c/docs/custom-components-intro).

Additionally, to ensure the functionality across all pages, I recommend checking out our CatchAllRoute example [here](https://github.com/BuilderIO/builder/blob/main/examples/react-js/src/main.jsx). This should provide guidance on ensuring seamless integration

> <https://github.com/BuilderIO/builder/blob/main/examples/react-js/src/main.jsx>

> **[Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.