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

Website: (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 then I write code in my react-app this code is not editable when it’s loaded on but the rest of the page will be editable on the

I have read blogs as well and registered custom components but when it’s loaded on it remains uneditable.

Any advice would be greatly appreciated.

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

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

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

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

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>;


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.

Additionally, to ensure the functionality across all pages, I recommend checking out our CatchAllRoute example here. This should provide guidance on ensuring seamless integration