Skip to main content

Solid's control-flow components — the ones you reach for in any component tree — all work inside <Canvas> exactly the way they work inside a <div>. You don't learn a new vocabulary; you keep using <Show>, <Switch>, <For>, <Index>, <Suspense>.

<Show>

The conditional. Mount and unmount children based on a signal.

When the signal flips, <Show> mounts and unmounts its children — not just hides them. The cube's BoxGeometry and MeshNormalMaterial are constructed when it appears and disposed when it disappears (more on disposal later).

<Switch> / <Match>

The branching cousin. For more than two possible states, pick the first matching <Match>.

Cycle through idle, loading, ready. Each state's scene is a different mesh entirely — when you click the button, the previous mesh's geometry and material are disposed and the next one mounts.

<For>

The keyed list. Each item is tracked by identity — reordering an array doesn't remount anything, push/pop is cheap.

Click "add" to push a new cube onto the signal array; the scene gains a cube. Click "remove" to pop one; it disappears. The other cubes don't move on the JSX level — they just update their position because the expression (index() - (cubes().length - 1) / 2) * 1.2 reads two reactive values. One assignment per moved cube, per change. No diffing, no remount.

<Index>

<For>'s positional cousin. Where <For> tracks items by identity, <Index> tracks positions — the item at slot 0 is always the same component, even if the value changes. Good for fixed-shape lists like a row of slots.

Click "shuffle". The colours change, but each cube stays mounted — only its color prop updates. With <For> you'd see the cubes re-mount whenever the array's identity changed.

<Suspense>

Wait for a createResource to resolve, falling back to something else in the meantime. Both the fallback and the resolved content can be <T.*>.

Click "new colour". The cube's colour comes from a createResource that takes ~800ms to resolve. While it's pending, <Suspense> shows the grey torus fallback. When it resolves, the cube mounts with the new colour.

What about clicking the cube itself?

So far the triggers have been DOM buttons. But what if you wanted to click the cube — the actual <T.Mesh> — and have that be the trigger? Same onClick, different target. That's the next chapter.

Last updated: 6/8/26, 11:20 AM

solid threeA SolidJS renderer for three.js — learn by reading.
Community
github