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 with my custom components that has 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
localhost view
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
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
"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
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
"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
"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;