Show

Stage: implementation

Show is a built-in Qwik component for conditional rendering.

It is useful when you want the condition and branches to be QRL-based. Show tracks the value returned from when$, renders then$ when it is truthy, and renders else$ when it is falsey. If else$ is omitted, falsey conditions render empty content.

To use it, you must add experimental: ['show'] to your qwikVite plugin options:

// vite.config.ts
import { defineConfig } from 'vite';
import { qwikVite } from '@qwik.dev/core/optimizer';
 
export default defineConfig(() => {
  return {
    plugins: [
      qwikVite({
        experimental: ['show'],
      }),
    ],
  };
});

import { Show, component$, useSignal } from '@qwik.dev/core';
 
export default component$(() => {
  const count = useSignal(0);
 
  return (
    <>
      <button onClick$={() => count.value++}>Add item</button>
      <button onClick$={() => (count.value = 0)}>Clear</button>
 
      <Show
        when$={() => count.value}
        then$={(count) => (
          <p>
            {count} item{count === 1 ? '' : 's'} in your cart.
          </p>
        )}
        else$={(count) => <p>Your cart is empty ({count}).</p>}
      />
    </>
  );
});

Props

Show accepts three props:

• when$: returns the condition. Truthy values select then$, falsey values select else$.
• then$: receives the value returned by when$ and returns the JSX to render when it is truthy.
• else$: optionally receives the value returned by when$ and returns the JSX to render when it is falsey.

when$, then$, and else$ are QRL props. Use the $ suffix so the optimizer can extract the closures.

The then$ and else$ callback argument is typed from the return value of when$:

const count = useSignal(0);
 
<Show
  when$={() => count.value}
  then$={(count) => <p>{count} items selected.</p>}
  else$={(count) => <p>No items selected ({count}).</p>}
/>;

Without else$

When else$ is not provided, a falsey condition renders nothing:

import { Show, component$, useSignal } from '@qwik.dev/core';
 
export default component$(() => {
  const expanded = useSignal(false);
 
  return (
    <>
      <button onClick$={() => (expanded.value = !expanded.value)}>
        Toggle details
      </button>
 
      <Show
        when$={() => expanded.value}
        then$={() => <p>Details are visible.</p>}
      />
    </>
  );
});

Reactivity

Show tracks the values read by when$. Put the reactive reads that should switch the branch inside when$:

<Show
  when$={() => user.value?.name ?? ''}
  then$={(name) => <p>Hello {name}</p>}
  else$={() => <p>Please sign in.</p>}
/>

Only the selected branch is resolved and invoked. When when$ is truthy, then$ runs and else$ does not. When when$ is falsey, else$ runs if it exists and then$ does not.

Show vs JSX conditionals

For simple conditional markup, ordinary JSX is still a good fit:

{signedIn.value ? <p>Welcome back.</p> : <p>Please sign in.</p>}

Use Show when you specifically want QRL-based conditional control flow and branch selection handled by the built-in primitive.

Related

• For general conditional rendering, see Rendering
• For the generated API entry, see API Reference