Drag and Drop React UI Builder with Builder.io

Why use page builder?

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.

Features of Builder.io page builder

Product Features

Drag and drop everything
Reusable design components
Import from Figma
Import from web
Preview before going live
Responsive design
Easy to bind the API data

Power Features

Symbols & state
Custom data fetching
Content API
Webhooks
Targeting and scheduling content
Extending Builder.io with plugins

Prerequisites

A Builder account. (Free account also fine)
At least Node.js v12
Basic understanding of Javascript

Steps to add page builder to a new react project

There are two ways to create a new react project to integrate Builder.

Using the CLI - Quick start
Create react app and add dependency of Builder

Using the CLI- Quick start

Enter the following command to initialize a Builder starter app

npm init builder.io

2. Pick a starter and select the language you want to use in your project. Here I am selecting React.

3. Enter the project name and confirm by entering the “Y”.

After confirming the project name creating a project and adding dependencies will be started. This will take some time.

Create a new react app

Create the new react app with the create-react-app command
For this example, the name of the project is “my-builder-app”
```
npx create-react-app my-builder-app
```
Change the directory with the cd command
```
cd my-app
```
Add Builder as a dependency
```
npm install @builder.io/react
```
Build the app with the build command
```
npm run build
```
Start the development server
```
npm run dev
```

Create a component and paste the below code

import { BuilderComponent, builder } from '@builder.io/react'
builder.init("YOUR_BUILDER_API_KEY")
export const MyComponent = () => {
  const [builderContentJson, setBuilderContentJson] = useState(null)
  useEffect(() => { 
    builder.get('page', { url: location.pathname })
      .promise().then(setBuilderContentJson)
  }, [])
  return 
}

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

2. After login into the builder get the API key.

3. Add the API key into your codebase.

Start building UI

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.
Change the CSS from the right panel.

List of the built-in components

Below are the built-in components in builder.io

Basic Components

Text
Image
Button
Columns
Box
Section

Media Components

Video
Embed

Forms Components

Forms
Input
Submit Button
Label
Select
Text area

Code Components

Custom code
slot
Symbols

Add support for custom components

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.