Show

Show renders its children when the condition is truthy and fallback when it is not. Unlike an if block it is a COMPONENT, so it composes: you can pass it to a helper, put it anywhere in markup, and it renders no element of its own.

									
										component Inbox() {
  const &[hasMail] = track(false)

  <section>
    <Show when={hasMail} fallback={<p>No mail. All caught up.</p>}>
      <p>You have mail.</p>
    </Show>
    <button onClick={() => hasMail = !hasMail}>toggle</button>
  </section>
}
									
								

Any condition

when takes the expression, not just a boolean: a comparison, a lookup, a length. Anything the compiler can track works, and the branch re-renders when it changes.

									
										component Inbox() {
  const &[items] = track<string[]>([])

  <Show when={items.length > 0} fallback={<p>Inbox empty.</p>}>
    <p>{items.length} message(s)</p>
  </Show>
}
									
								

No fallback means nothing

Without a fallback prop the false branch renders nothing at all — the usual choice when the surrounding layout already reserves the space.

Show or an if block?