Scene Panel

The scene panel lets you inspect your component, its elements, and props.

When opening a component in Triplex its elements are displayed in the scene panel. These elements can have their props inspected and edited through UI controls and visually in the Scene.

New Knowledge

If you find elements of the same name being hard to differentiate setting a name prop on them will be reflected in the scene panel.

Element Actions

Each element has available actions you can perform on it:

Delete — Backspace
Duplicate — Cmd + D
Zoom To Element — F
Go To Declaration

In Triplex for VS Code you can find these actions in the right-click menu on an element.

Selecting Elements

The selection system prioritizes named components, when clicking on a scene object if it belongs to a component that component will be selected, otherwise the host element will.

Selection Cycling

Clicking multiple times on a scene object will cycle through all the elements that are under the cursor, even HTML ones! This is useful when you have multiple elements stacked on top of each other and you want to select one underneath.

Hidden Scene Objects

To select scene objects that don't render anything such as a group, Fragment, or invisible objects, you can use the scene panel to select them.

Inspecting Custom Components

Clicking on the View Child Elements action on a custom component will reveal its internally rendered elements. You're able to inspect and edit them just as you can elements owned by the open component.

New Knowledge

Custom components that are sourced from node modules can also be edited and inspected.

Switching Between Components

You can switch between the components declared in a file by using the Component Switcher at the top of the scene panel.

New Knowledge

Switching components will not lose any changes you've made as Triplex keeps all the changes you've made until you save or close the file.

Naming Elements

Elements that appear in the scene panel can be given a name by setting the name prop. This name will be reflected in the scene panel and can be used to identify elements that are hard to differentiate.

For example given the following code:

export function Scene() {
  return (
    <>
      <mesh name="box1">
        <boxGeometry />
      </mesh>
      <mesh name="box2">
        <boxGeometry />
      </mesh>
    </>
  );
}

The elements will be rendered in the scene panel as "box1 (mesh)" and "box2 (mesh)".

New Knowledge

Both host elements and custom components can be named, however the value passed to the name prop must be a static string literal for it to be reflected in the scene panel.

Next Steps

For an exhaustive list of features in the scene panel see Building Your Scene > UI Glossary, otherwise continue to learn about Visual Controls.