Building Your Scene Scene Input Controls

Input Controls

Input controls let you update props through the UI.

Component props can be inspected and edited through the UI. When an element is selected its props are displayed in the context area.

Making Changes

Find props in the context area and change its value. When moving away from the input your changes will are applied and ready to save.

Once you've made all the changes you want make sure to save it back to source using the ⌘ + SSave action.

Props with an italic label means that they have a description available. Hover over the label to see the description.

New Knowledge

Give your own props a description by adding a multi-line comment above it.

interface Props {
  /** Position of the object on the x-axis. */
  x: number;
}

Cycle Through Prop Types

For props that can be given different values use the Switch Prop Type action to cycle through them.

New Knowledge

Props that take different values can still be edited through the UI. The following example declares a prop that can be given a number, string, or boolean.

export function Component({}: { value: number | string | boolean });

Default Props

Default props work with input controls. If a prop has no value set its default value is used.

Take the following component, when the it's rendered with no passed props the isVisible prop will appear checked in the UI.

export function Component({ isVisible = true }: { isVisible: boolean });

Number Input

Modifiers

The number input has keyboard modifiers you can use to multiply and divide the amount of change.

Using Control will multiply and Shift will divide the amount. You can use them together.

Code-Controlled Props

Props that have dynamic values are considered controlled by code and can't be edited through the UI. You'll see the Controlled By Code action next to it, interacting with the control jumps you to its code declaration.

Unsupported Props

Some props just can't be edited through the UI yet. You'll see the Unsupported Prop action next to it, interacting with it opens GitHub for you to create an issue to gauge community interest for adding support.

Next Steps

For an exhaustive list of supported props see API Reference > Props, otherwise continue to learn about Play Controls.