Windows & Chrome

Native chrome — window titlebars, toolbars, and sidebar splits — is built from ordinary widget intrinsics, declared as JSX children (see App Model). This page covers the two-pane sidebar/content <splitview> shape; a third list pane and a <menubar> widget also compose into this same chrome — see Menu Bar and Split Views. Both examples/notes/main.tsx and examples/gallery/ exercise the two-pane shape end to end on both platforms.

<window>

The JSX root of an app. title, defaultWidth, and defaultHeight are honored on both platforms; title is live-updatable, the size props are create-only (they set the initial window size, not a constraint). See the Widget Reference for the full prop table.

<splitview>: sidebar + content

<splitview sidebarWidth={0.28}> takes two children, distinguished by the slot attached prop (sidebar or content):

<splitview sidebarWidth={0.28}>
  <toolbarview slot="sidebar">…</toolbarview>
  <toolbarview slot="content">…</toolbarview>
</splitview>

• On Linux, this is a real AdwOverlaySplitView — the window runs as an AdwApplicationWindow so the split fills edge-to-edge, GNOME-style.
• On macOS, this is a real NSSplitViewController-managed split (using the sidebarWithViewController: API), which is what gives the sidebar system vibrancy/Liquid Glass material rather than a manually composited effect view.

collapsed is live-updatable on both; sidebarWidth sets the initial split proportion at creation.

<toolbarview> + <headerbar>: per-pane headers

Each pane is wrapped in a <toolbarview> (AdwToolbarView on Linux) whose first child is a <headerbar> — so the sidebar and the content pane each carry their own header, instead of one shared window titlebar:

<toolbarview slot="sidebar">
  <headerbar>
    <button iconName="document-new" onClick={createNote} slot="start" />
  </headerbar>
  {/* sidebar content */}
</toolbarview>

The two platforms render this identically-shaped tree differently, on purpose:

• On Linux, each <toolbarview> adds its <headerbar> as a real top bar (AdwToolbarView.addTopBar) — you get two independent AdwHeaderBars, one per pane, which is the native GNOME idiom for a sidebar app.
• On macOS, the two <headerbar>s do not each create their own bar. Their items merge into one unified NSToolbar spanning the window’s top edge, split by an NSTrackingSeparatorToolbarItem aligned to the split’s divider — the sidebar’s items sit left of it, the content pane’s items sit right of it. This is the native macOS idiom (Notes.app, Mail), achieved via .fullSizeContentView + titlebarAppearsTransparent so the sidebar’s vibrancy reaches the very top, with the traffic-light window controls floating over it.

<headerbar title="…"> sets the pane’s (or, on macOS, the toolbar’s) title; on children, the slot attached prop (start/end) positions items on either side of the title.

Where this is headed

A three-pane <splitview> (sidebar/list/content) and a dedicated <menubar> widget have landed — see Split Views and Menu Bar. A <window> that composes more than one independent split remains on the roadmap; check back here once it lands rather than assuming prop names in advance.