Component Controls

Learn how to change the props your component is given during development.

Seeing how your component behaves when given different props is a key part of building with Triplex. With Component Controls the props of the open component can be changed at any time by clicking the Component Controls action in the Scene Panel.

Making Changes

With Component Controls open you can change the value of props through the UI. The behavior is the same as Editing Props 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?