Drag and Drop React UI Builder with Builder.io

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
    1. Drag and drop everything
    2. Reusable design components
    3. Import from Figma
    4. Import from web
    5. Preview before going live
    6. Responsive design
    7. 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.

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

Using the CLI- Quick start

  1. Enter the following command to initialize a Builder starter app
npm init builder.io

2. Pick a starter

    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

  1. 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
            
  2. Change the directory with the cd command
                cd my-app
            
  3. Add Builder as a dependency
                npm install @builder.io/react
            
  4. Build the app with the build command
                npm run build
            
  5. Start the development server
                npm run dev
            
  6. 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

  1. Log in with the builder using Builder.io: Drag and drop Visual CMS

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.

Now you can check the published page by running your site. Here I am testing with localhost.

Previous Article