Hi, I have an existing website already built and deployed to cloudflare pages through github. I want to integrate builder.io into the project for the non-technical members of the team to be able to update the website design as needed for content purposes. I read through the documentation and I’m confused if this is even possible. Most of the documentation seems to mention registering a component to builder.io then completing the actual design on builder.io. I already my existing website built out so I don’t want to have to re-write everything, but I am interested in integrating with builder.io.
Is this a feasible thing to do? Integrate my existing project to the builder.io studio? Thanks!
Yes, it is definitely feasible to integrate your existing website with Builder.io to allow non-technical team members to update the website design. You don’t have to rewrite everything; Builder.io is designed to be integrated with existing projects. Here’s a brief overview of how you can achieve this integration:
Choose the Integration Type: You can use page models if you want Builder to have control over entire pages, or section models if you want Builder to manage only certain parts of your pages. Section models are useful if you want to update specific sections like headers, footers, or content blocks without rewriting entire pages.
Add Builder as a Dependency: First, you need to add Builder.io to your project. If you are using JavaScript frameworks like React, you would typically install the Builder SDK via npm. For example:
npm install @builder.io/react
This step integrates Builder.io into your codebase, enabling you to render Builder content within your existing React components.
Create Builder Components: Once the SDK is installed, you can create a BuilderComponent in your project to render Builder.io content. This component is what you will integrate into your existing website to display your Builder-managed content or sections.
Set Up Your Models and Content in Builder.io: Create the necessary models (pages or sections) in the Builder.io visual editor. For sections, you can create customizable blocks and symbols that can be dropped into existing pages.
Use the Visual Editor: Non-technical team members can use Builder.io’s visual editor to modify and publish content. This editor allows them to drag and drop elements to customize pages or sections without needing to touch the code.
Integrate the Content in Your Site: In your codebase, modify your pages to render content managed in Builder using the Builder components you set up. For instance, you can replace a static hero section in your existing site with a dynamic section rendered from Builder.
Additionally, you can register your existing custom components to be used with the builder.io editor to create pages. To use your custom components in the Builder Visual Editor, you need to take a couple of minimal steps in your codebase. You can refer to the below link for steps