# Visual editor doesnt work with data model connection but page works?

**URL:** <https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react, nextjs\
**Created:** [September 13, 2023, 12:32am UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184 "2023-09-13T00:32:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![devMLab](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@devMLab](https://forum.builder.io/u/devMLab)\
**Post date:** [September 13, 2023, 12:32am UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/1 "2023-09-13T00:32:27Z")

</div>

**Builder content link**  
`https://builder.io/content/02166b1913ae41768f930010de08badf`

**Builder public api key**  
`b4b42482e6a04cdf9e3ebd8b7751891f`

**What are you trying to accomplish**  
I want to create pages on [builder.io](http://builder.io) with my custom components that has [builder.io](http://builder.io) data model connections

Hey all,

I have a very weird problem at the moment. I created page with my custom components and I connected the data model to the navigation bar. The interesting thing is that the component gets nothing on data on the visual editor BUT it works on the localhost page.

## **Visual editor view**![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/73c801a21fa112b4e2647f5baaf4be3dd9cc33be.png)

**localhost view**

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/af4f747d249c4aba0c25cf3ceedb391ded8ee4ba.png)

How can I show the page properly on visual editor? (p.s. This `Home` and `More` items are just static texts for component creation)

Extra information;

If I convert the component to symbol, then It shows with data on visual editor BUT not on the page so that’s total opposite problem 🤷‍♂️

* * *

**I’m using;**

- NextJS 13.4.19 with AppRouter
- Typescript 5.2.2
- Node v.20
- Chakra UI

_Example codes_

and this is the **[…page] page.tsx**

```auto
import { RenderBuilderContent } from "@/features/builderIo/components/builderIo";
import { PageProps } from "@/interfaces/layout.interface";
import { getContentByPage } from "@/features/builderIo/helpers/builderIo";

export default async function Page(props: PageProps) {
  const content = await getContentByPage(props);

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} />
    </>
  );
}

```

**RenderBuilderContent** code

```auto
"use client";

import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import "../helpers/builderRegistry";
import { initBuilderIo } from "../helpers/builderIo";

interface IBuilderPageProps {
  content?: BuilderContent;
}

initBuilderIo();

export function RenderBuilderContent({ content }: IBuilderPageProps) {
  // Call the useIsPreviewing hook to determine if
  // the page is being previewed in Builder
  const isPreviewing = useIsPreviewing();
  // If "content" has a value or the page is being previewed in Builder,
  // render the BuilderComponent with the specified content and model props.
  if (content || isPreviewing) {
    return <BuilderComponent content={content} model="page" />;
  }
  // If the "content" is falsy and the page is
  // not being previewed in Builder, render the
  // DefaultErrorPage with a 404.
  return <DefaultErrorPage statusCode={404} />;
}

```

**NavigationBar builderIO** settings

```auto
import { Component as BuilderIoComponent } from "@builder.io/sdk";

export const builderIoSettings: BuilderIoComponent = {
  name: "NavigationBar",
  image: "https://tabler-icons.io/static/tabler-icons/icons-png/menu-2.png",
  override: true,
  canHaveChildren: false,
  inputs: [
    {
      name: "logo",
      type: "file",
      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
    },
    {
      name: "navLinks",
      friendlyName: "Navigation Links",
      type: "reference",
      model: "navigation-links",
    },
  ],
};

```

- **Navbar** component

```auto
"use client";
import {
  Box,
  Flex,
  Text,
  Stack,
  Collapse,
  useDisclosure,
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@chakra-ui/react";
import Image from "next/image";
import MobileNav from "./MobileNav";
import DesktopNav from "./DesktopNav";
import styles from "./CNavBar.module.css";
import { Props } from "./CNavBar.interface";

export default function NavigationBar({ logo, navLinks }: Props) {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <Box>
      <Flex minH={"60px"} py={{ base: 2 }} px={{ base: 4 }} align={"center"}>
        <Flex
          flex={{ base: 0, md: "auto" }}
          ml={{ base: 3 }}
          display={{ base: "flex", md: "none" }}
          order={{ base: 1, md: "auto" }}
        >
          <Text onClick={onToggle} aria-label={"Toggle Navigation"}>
            Menu
          </Text>
        </Flex>
        <Flex
          flex={{ base: 1 }}
          justify={{ base: "start", md: "space-between" }}
          align={"center"}
          order={0}
        >
          {logo ? (
            <Image alt="" src={logo} height={18} width={161} />
          ) : (
            <Text>Logo Here</Text>
          )}

          <Flex
            display={{ base: "none", md: "flex" }}
            className={styles.CNavBarMenu}
          >
            <DesktopNav navLinks={navLinks} />
          </Flex>

          <Stack
            flex={{ base: 1, md: 0 }}
            justify={"flex-end"}
            direction={"row"}
            spacing={6}
          >
            <Popover trigger={"hover"} placement={"bottom-start"}>
              <PopoverTrigger>
                <Box as="a" href={"#"} fontSize={"sm"}>
                  EN
                </Box>
              </PopoverTrigger>

              <PopoverContent border={0} p={4} minW={"sm"}>
                <Box as="a" role={"group"} display={"block"}>
                  <Stack>
                    <Box>
                      <Text transition={"all .3s ease"}>test</Text>
                    </Box>
                  </Stack>
                </Box>
              </PopoverContent>
            </Popover>
          </Stack>
        </Flex>
      </Flex>

      <Collapse in={isOpen} animateOpacity>
        <MobileNav navLinks={navLinks} />
      </Collapse>
    </Box>
  );
}

```

**DesktopNav** Component

```auto
"use client";

import {
  Box,
  Flex,
  Text,
  Stack,
  Icon,
  Popover,
  PopoverTrigger,
  PopoverContent,
  useColorModeValue,
} from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";
import { INavItem, NAV_ITEMS, DesktopNavProps } from "./CNavBar.interface";
import { camelCase } from "lodash";

const DesktopNav = ({ navLinks }: DesktopNavProps) => {
  const linkColor = useColorModeValue("gray.600", "gray.200");
  const linkHoverColor = useColorModeValue("gray.800", "white");
  const popoverContentBgColor = useColorModeValue("white", "gray.800");

/// THIS IS THE DATA PART
  const navigationLinks =
    navLinks && navLinks.value ? navLinks.value.data.links : NAV_ITEMS;

  console.log("navlinks:", navLinks);

  return (
    <Stack direction={"row"} spacing={4}>
      {navigationLinks.map((navItem) => (
        <Box key={camelCase(navItem.text)}>
          <Popover trigger={"hover"} placement={"bottom-start"}>
            <PopoverTrigger>
              <Box
                as="a"
                p={2}
                href={navItem.url ?? "#"}
                fontSize={"sm"}
                fontWeight={500}
                color={linkColor}
                _hover={{
                  textDecoration: "none",
                  color: linkHoverColor,
                }}
              >
                {navItem.text}
              </Box>
            </PopoverTrigger>

            {navItem.subLinks && (
              <PopoverContent
                border={0}
                boxShadow={"xl"}
                bg={popoverContentBgColor}
                p={4}
                rounded={"xl"}
                minW={"sm"}
              >
                <Stack>
                  {navItem.subLinks.map((child) => (
                    <DesktopSubNav key={camelCase(child.text)} {...child} />
                  ))}
                </Stack>
              </PopoverContent>
            )}
          </Popover>
        </Box>
      ))}
    </Stack>
  );
};

const DesktopSubNav = ({ text, url }: INavItem) => {
  return (
    <Box
      as="a"
      href={url ?? "#"}
      role={"group"}
      display={"block"}
      p={2}
      rounded={"md"}
      _hover={{ bg: useColorModeValue("pink.50", "gray.900") }}
    >
      <Stack direction={"row"} align={"center"}>
        <Box>
          <Text
            transition={"all .3s ease"}
            _groupHover={{ color: "pink.400" }}
            fontWeight={500}
          >
            {text}
          </Text>
          {/* <Text fontSize={"sm"}>{subLabel}</Text> */}
        </Box>
        <Flex
          transition={"all .3s ease"}
          transform={"translateX(-10px)"}
          opacity={0}
          _groupHover={{ opacity: "100%", transform: "translateX(0)" }}
          justify={"flex-end"}
          align={"center"}
          flex={1}
        >
          <Icon color={"pink.400"} w={5} h={5} as={ChevronRightIcon} />
        </Flex>
      </Stack>
    </Box>
  );
};

export default DesktopNav;

```

---

<div class="post-metadata">

**Author:** ![OmPrakash](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/omprakash/32/2751_2.png) [@OmPrakash](https://forum.builder.io/u/OmPrakash)\
**Post date:** [September 14, 2023, 5:53pm UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/2 "2023-09-14T17:53:34Z")

</div>

Hi @devMLab, welcome to the forum community!

I will try to re create similar situation and check if the issues reoccurs. Meanwhile, could you help me with the “@builder.io/react” and “react” version you are using?

Thank you for reaching out to us here!

---

<div class="post-metadata">

**Author:** ![devMLab](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@devMLab](https://forum.builder.io/u/devMLab)\
**Post date:** [September 14, 2023, 9:32pm UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/3 "2023-09-14T21:32:32Z")

</div>

Hey @OmPrakash,

Thanks for your reply! Package versions are below;

```auto
"@builder.io/dev-tools": "0.1.14",
"@builder.io/react": "3.0.14",
"@builder.io/sdk": "2.0.8",
"react": "18.2.0",
"react-dom": "18.2.0",

```

---

<div class="post-metadata">

**Author:** ![OmPrakash](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/omprakash/32/2751_2.png) [@OmPrakash](https://forum.builder.io/u/OmPrakash)\
**Post date:** [September 15, 2023, 9:56am UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/4 "2023-09-15T09:56:27Z")

</div>

I was able to replicate the issue. I would like to bring this to the attention of our internal team for further examination. Thank you for bringing this matter to our notice!

---

<div class="post-metadata">

**Author:** ![OmPrakash](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/omprakash/32/2751_2.png) [@OmPrakash](https://forum.builder.io/u/OmPrakash)\
**Post date:** [September 15, 2023, 7:44pm UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/5 "2023-09-15T19:44:49Z")

</div>

@devMLab  
In order to resolve the issue, you will need to add `options={{enrich: true}}` to your **RenderBuilderContent** code as below.  
`<BuilderComponent content={content} model="page" options={{enrich: true}} />`

Please do give it a try and let us know how that goes.

---

<div class="post-metadata">

**Author:** ![devMLab](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@devMLab](https://forum.builder.io/u/devMLab)\
**Post date:** [September 15, 2023, 8:12pm UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/6 "2023-09-15T20:12:00Z")

</div>

Hey @OmPrakash, it works now! thanks a lot for your help!

---

<div class="post-metadata">

**Author:** ![OmPrakash](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/omprakash/32/2751_2.png) [@OmPrakash](https://forum.builder.io/u/OmPrakash)\
**Post date:** [September 16, 2023, 3:36am UTC](https://forum.builder.io/t/visual-editor-doesnt-work-with-data-model-connection-but-page-works/4184/7 "2023-09-16T03:36:54Z")

</div>

Welcome @devMLab and thank you!