7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact sales

7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

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

Pass data from Builder or from your application directly to your custom component to customize styles or behaviors.

  • Inputs to custom components in Builder are accessible to the component code through the component's props.
  • Access dynamic values in Builder state within a custom component through the builderState property.
  • Pass data from your application directly into Builder state with the data attribute.

When a custom component is provided an input option, that value can be accessed directly within the component through props. This value is defined in code, but can be manipulated in Builder's Visual Editor.

Within the Visual Editor, you can set the value by clicking on the component and then going to the Options panel. There, change the input's value.

In the video below, the Options panel contains the text state value. When updated, the text within the CustomTip component is updated on the page.

By creating a custom input, you add user-defined state to a custom component within the Visual Editor. Your custom component will have access to that value as well.

In the video below, a new custom input is created within the Content Inputs panel called calloutText. This input is given a default value of "Tip".

You may also access application state within your custom components. This can be useful, for example, when you want to be able to influence the presentation of a component based on internal values within your application.

Read more about binding data within the Data binding overview. To learn how to add more values to state directly from Builder, visit Content inputs.

Was this article helpful?

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

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024