BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Guides

Quick start

SEO optimizing Builder.io content

Creating custom models

Using custom fields

Enable on-site previewing and editing

Dynamic URLs and advanced data fetching

Adding Custom Code

Using 3rd party libraries

Import HTML

Extending Builder.io with plugins

REST API

HTML API

Content API

GraphQL API

Webhooks

Write API

React

Getting started

Using Next.js

Using Gatsby

Using your React components in Builder

New!

Components-only mode

Triggering custom actions

Angular

Ruby on rails

Webcomponents

Github

Creating reusable components with Symbols

Learn how to make custom builder blocks that can update many pages in one place, and even take in custom inputs by using Symbols.

Reusable components are extremely helpful. They save you time by having to create less components and it keeps your style consistent from page to page. You can drop your reusable components into any of your Builder pages, and any changes you make will be saved and updated everywhere. We will be covering:

Creating your component

Navigate to the Models tab (located in the site navigation bar). Models can be used to create many things and can be very customized, but we are going to keep this simple. In the Models tab, click “create model” and select “component”. Give your component a name. Once you click create, we are going to ignore the developer options for now.

Building out your component

Navigate back to Content. You’ll see that we have two tabs at the top now, pages and symbols. Lets create a new symbol. Create a new entry and select “symbols”. Now we can build out our content. We Are going to make a symbol that can ask a user something, then we are going to bind it to the UI and use it in any page. We can also update our symbol on any page, and when the page is published, the symbol will get updated on every page it is used on.


Next, we are going to add the pre-made Hero template to our page. Go to the “Data” tab and click “create input”. Let’s call our input “Title”, it will be type “text”, then click “more options” and give this input a default value of “Great title”. Now, we will add two more inputs, a subtitle and an image. For the subtitle input, repeat the steps we did for “Title”. For our image input, give it a title of “image”, it will be type “file”, and below you can choose a file type (JPEG is the best option). Then, give this input a default value. This can be any image.

Binding

Now we want to take these inputs and bind them to our UI. Click on the title and navigate to the "element data binding" section. Click “new binding”. We will “get” our text “from” Title. You will notice a “G” now shows up for the title. This is our dev state, you can edit this in the “data” tab. Repeat this step for our subtitle. To bind the image, click "new binding", then for "get" enter in "style.backgroundImage". For "from", select "image". This isn't going to give us our default image, so we need to enter in some CSS. We will input "url(" + state.image + ")". Now, our default image will appear.


Reusing your component

Now, we will save our page, name it “Hero component”, and publish it. We can use our component in a page. Once you have a new page created, drag and drop the “symbol” component onto the page. Click edit, then select the “Symbol” page in the model dropdown. Then select “Hero Component” for the entry. Now, you are using your reusable component!

Up Next

Targeting and scheduling content