Views

JSX builds native UI, not HTML. Use Show and For when children should appear, disappear, or reorder as state changes.

#How views work

A component function runs once. Solid updates the properties and child slots that read changing values. Each window has its own root, disposed when the window closes.

#Conditional content

<Show when={expanded()} fallback={<Text>Collapsed</Text>}>
  <Text>Expanded content</Text>
</Show>

Removing a branch disposes its effects. Sibling content is left alone.

#Lists

<For each={items()}>{item => <Text>{item.name}</Text>}</For>

Give stateful rows a stable identity so reordering keeps their state. For long collections, use Table or Tree.

#Window lifecycle

Each Window has an independent root. Closing one window does not close the others. Handle the Dock icon by opening a new window when hasVisibleWindows is false.

#Current window

function Content() {
  const window = Window.getCurrentWindow();
  return <Button onClick={() => window.close()}>Close</Button>;
}

Capture the window during setup, or pass it into async work. Do not look it up from an unrelated callback later.

#Testing

quickgui check
quickgui test

examples/components-typescript is the UI gallery. examples/quick-git-typescript is a larger app with menus, dialogs, and multiple windows.