Component Controls

Component controls let you change the props that are given to your component.

Seeing how your component behaves when given different props is a key part of building with Triplex. Change the props of your component at any time by clicking the Component Controls action in the scene panel.

Making Changes

With the controls open you can change the value of props through the UI. The behavior is the same as Input Controls with one difference — changes are only temporary for the current session.

For more advanced and specific scenarios we recommend creating example components with props needed.

Resetting Changes

To reset props back to their default values click the Reset Props action.

New Knowledge

Props that have default values set through destructured args are respected by Component Controls, including when resetting props back to their default values.

export function Component({ x = 10 }: { x: number });

Alternative to Leva

Writing code with Leva is a common way to have your component be configurable during development. With component controls you're able to decide if you want to maintain that code or not.

See the Replacing Leva With Component Props guide for how to use Triplex like Leva.

Was this page helpful?