Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
Use Cases
Pricing
Blog
×
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☰
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.
Tip: For the most up-to-date content on using custom components in Builder, check out the official documentation on Integrating Custom Components.
This tutorial shows you how to integrate your custom React components in the following three steps:
👉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.
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.
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.
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.
👉 Tip: To see your work on localhost, you have to configure Builder by pointing to a page that has a <BuilderComponent />
on it and your components registered. For step-by-step instructions on configuring Builder to use localhost
, checkout the Getting your API Key and setting your URL section of that article.
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.
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
.
Builder has a lot of other inputs you can configure in your custom component. Check out Input Types in Builder for a comprehensive list.