Builder is a new headless CMS with full visual drag-and-drop page-building abilities. It’s easy to integrate into any site and you can even use your custom code components in the visual editor! Using any tech stack we can work with Builder.io.
Steps to add page builder to an existing react project
In the case of the existing react app, you can skip steps 1 & 2. Directly you can start with adding the builder dependency. Follow steps 3 to step 6 from above.
Configuration of builder
Now use the builder with the app follow the below steps
For building the UI you can use three types of models
Page Model
Section Model
CMS Data Model
Let’s start with the page model. For creating the UI with a page model open the https://builder.io/content
Create a new page
For creating a page click on the “Create Page” CTA. After clicking it will ask to choose a template. You can select an inbuilt template. If you want to create UI from scratch choose “Blank”.
Let’s try with a blank template to create the home page.
Add a photo
Drag a Box from the Insert tab into the +Add Block section on your new page.
Now drag an Image block into the Box you just added. Edit the Image block to choose your photo.
Change the CSS from the right panel.
Add a text over the Image
Once your photo appears, drag a Text block onto it. Edit text by double clicking on the text component
Change the text size “Normal” to “Heading 1”
Center your Text box vertically by selecting it, then choosing the center vertically icon in the Align section of the Style tab.
Add a button over the Image
Drag the button on the image
Change the CSS
Add columns below the Hero image
Drag the columns below the image view
Drag a Box from the Insert tab into the +Add Block section on columns.
Now drag an Image block into the Box you just added. Edit the Image block to choose your photo.
In the above section, you have seen the built-in components but now you can also create your own custom component and use, them as built-in components, are used.
Create your own custom component
Create a components folder in your project. Create the TSX or JSX component. Below is an example of creating the custom component. Let’s create a Heading component.
In the above code snippet, there are 2 steps to do
Define your component
Register you component
Import builder and BuilderComponent.
Register your component as in the following example. Here, register component() registers a Heading component with one text input: title and color
The registerComponent(component, options) method takes two arguments:
component: such as Heading in the following example
options: an object with which you can specify property values such as children, requirements, and inputs
Using your custom components with the builder visual editor
You can find your component under “Custom Component”. Below is an example of using the custom component.
Publish your page
After completion of UI publish your page by clicking the “Publish” button. By publishing the page, it going to be live. You can see the output by running your site.
Now you can check the published page by running your site. Here I am testing with localhost.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.