×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Developers

GET STARTED

PROJECTS

Builder

Builder SDKs, examples, starters, and plugins

Mitosis

Universal component compiler. Write components once and compile to Vue, React, Svelte, Angular, and more

Qwik

Extreme high speed frontend framework

Builder

Builder SDKs, examples, starters, and plugins

Qwik

Extreme high speed frontent framework

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Made in Builder

‹ Back to blog

How to drag+drop to build pages visually with your React components

By Kapunahele Wong

If you're using Builder.io to visually develop apps using drag-and-drop, you can use your custom React components to tailor visual components for your team.

With your custom components in Builder, you can create any component your team needs, configure options for variability, and your teammates can use and reuse your components throughout the app. Freeing up developer time while giving non-coding team members the flexibility to iterate and publish on their own increases efficiency and encourages creativity across the team.

Goals

This tutorial shows you how to integrate your custom React components in the following three steps:

  1. Create a custom React component
  2. Register your component with your Builder app
  3. Use your new component in Builder's drag and drop editor

👉Tip:This post builds upon our previous blog post Setting up visual drag-and-drop page building with Next.js.

If you haven't gone through that tutorial, you can download the finished Next.js application on GitHub, but you'll need to configure Builder and your application to see each other. You might also want to set up a default page, all of which the previous article covers.

Creating a custom React component

In the root of your project, create a folder called components.

Inside the components directory, create a file called heading.tsx.

Paste the following code into heading.tsx and save.

Let's cover what each piece of code does. The first line imports builder.io/react, which this app needs to register the component.

The next line exports the Heading component so it's available for import elsewhere in our app. The heading uses two props, or properties, color and title in an h1.

The next section is where you register your custom component with builder.registerComponent().

With builder.registerComponent(), you configure your component. First, you give it a name, here Heading. You declare your props in an inputs array.

We have two props. The first is a title with a type of text and a default value of "I am a heading!". The second prop is color, with a type of color and a default value of black.

What you configure in builder.registerComponent() is what shows up in Builder.

Importing your custom component

In [[...page]].tsx, import your new custom component.

If you don't have a [[...page]].tsx, you can grab the code from GitHub, or head over to the first article in this series, Setting up visual drag-and-drop page building with Next.js, where you'll find the code and an explanation of what it does.

Using your component in Builder

Log into Builder and open the space that you have connected to your app. If you need some guidance on how to configure your app and Builder to see one another, see Setting up visual drag-and-drop page building with Next.js.

In your Builder space, click the Content icon:

Choose a page. The following example shows the about page, but you can select any page you have, or create a new one.

When you're in the page, click the Show More button that's within the Insert panel. The Insert panel opens by default when you load a page, so you should already be there.

Show More displays a section called Code Components where we see our custom Heading component.

Drag and drop the Heading component to the working area. As soon as you drop, the header copy you created in your app shows up.

If you click Edit, you can change the heading to be whatever you like.

On the right of the screen, the Options panel contains the inputs or props we told Builder about in builder.registerComponent(). The panel includes the title and color along with their default values.

If you click on the color block and choose another color from the picker, the h1 changes color.

If you click on the color block and choose another color from the picker, the h1 changes color.

Putting it all together

The following image shows how the code corresponds to what's in Builder's UI. Everything we declared in builder.registerComponent() is present in the Insert and Options panels. The name "Heading" along with our inputs, and even our default values populate the Builder interface.

To see your component in the browser, click the green Publish button in the upper right of the browser and being sure you're serving your app locally, go to localhost/your page . In this example, we've used the about page, so we go to http://localhost:3000/about.

Next steps–iteration, here we come!

Builder has a lot of other inputs you can configure in your custom component. See Using your React components in Builder for a comprehensive list.

Enter some text...
Read more on the blog
$14m to build faster together
Using Contentful data in Builder's Visual Editor
Connecting dynamic data in Builder's Visual Editor

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

INTEGRATIONS

All Integrations

Shopify

React

Angular

Next.js

Gatsby

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

PRODUCT

Features

Pricing

© 2021 Builder.io, Inc.

Security

Privacy Policy

Terms of Service