Builder.io possibilities, questions, best use cases

Technical Questions
1

Hello everyone,

Sorry for creating this topic but i though it’s easier to get answers for multiple questions in one place.

  1. There is any other way(except web and html imports) to import an existing react/nextjs project to continue building in builder.io?

  2. What would be the best approach here to build on top of an existing project?

  3. I tried to import my existing project but then i have the issue with the routes, can builder recognize my routes from the existing project? Currently if i open a page which is not created by builder but it does exist in my old project i have the error message that builder can not connect to my site.

Thank you in advance for your answers!

2

Hello @Tamas,

Welcome to the builder.io forum post!

  1. For using builder with your existing reach/nextjs project, you will need to integrate builder SDK in your app codebase. For integration steps, we recommend you check out our Quickstart guide.

  2. The best approach is to Integrate builder SDK or use HTML API directly in your app

  3. For routes, you can implement the cache all routes, builder/examples/react-js at main · BuilderIO/builder · GitHub

3

Hey, Thank you for your response!

I hope you don’t mind if i have some more questions.

Just to make sure what building on top of means, it is currently possible to import the existing pages and edit them in builder? or the best would be to recreate them in builder to make them editable?

Thank you,

4

Hello @Tamas,

To make the pages editable you will need to first integrate Builder into your page code and subsequently register all your custom components to be used in Builder.

e.g.

Integrate Builder

import { useEffect, useState } from "react";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";

// Put your API key here
builder.init(YOUR_API_KEY);

// set whether you're using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
  const isPreviewingInBuilder = useIsPreviewing();
  const [notFound, setNotFound] = useState(false);
  const [content, setContent] = useState(null);

  // get the page content from Builder
   useEffect(() => {
    async function fetchContent() {
      const content = await builder
        .get("page", {
          url: window.location.pathname
        })
        .promise();

      setContent(content);
      setNotFound(!content);

      // if the page title is found, 
      // set the document title
      if (content?.data.title) {
       document.title = content.data.title
      }
    }
    fetchContent();
  }, [window.location.pathname]);
  
  // If no page is found, return 
  // a 404 page from your code.
  // The following hypothetical 
  // <FourOhFour> is placeholder.
  if (notFound && !isPreviewingInBuilder) {
    return <FourOhFour/>
  }

  // return the page when found
  return (
    <>
      {/* Render the Builder page */}
      <BuilderComponent model="page" content={content} />
    </>
  );
}

Register this component for use in the Visual Editor

type MyProps = { content: string; link: string }

// Any component in your codebase
function MyButton(props: MyProps) {
  return <Button href={props.link}>{props.content}</Button>
}

// Register this component for use in the Visual Editor
Builder.registerComponent(MyButton,{
  name: 'MyButton',
  inputs: [
    // 'name' is the name of your prop
    { name: 'content', type: 'text' },
    { name: 'link', type: 'url' },
  ],
)
5

I might understood something wrong, even if i register my components, the already created page outside of the builder will not be editable inside the visual builder, is this correct?

If i want i can add extra sections with the RenderBuilderContent, but i can not change anything if the code existed before.

I don’t know why i though that if i create the route in builder and i register all the components then i can edit my code from builder even though it was initially created with code and not with builder.

Thank you for your time!

6

Hello @Tamas,

Indeed, previously created pages cannot be edited without modifying the code to integrate the page or section model. While you have the option to add extra sections using RenderBuilderContent, making changes to existing code may necessitate rebuilding the page with newly registered components.

While you can create a catchAll route, existing pages will not be considered until integration is complete for each one individually.

If you have any further questions or need assistance, feel free to ask.

1 Like