Editing Props
Your component props can be inspected and edited thanks to TypeScript, even if your project isn't directly using it.
When an element is selected its props are displayed in the Context Area.
Making Changes
For a given prop find it in the Context Area and change its value. When blurring away from the input the change will be 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.
To give your own component props a description add 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.
Union type props can be given different values 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 are respected by the editor controls. If a prop has no value set the default value will be used.
Given the following component declaration when the component is rendered with no props the isVisible prop will appear checked in the UI.
export function Component({ isVisible = true }: { isVisible: boolean });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 Component Controls.