Adwaita Storybook

A component browser for the Libadwaita widget set: a sidebar of stories, a live preview, and a controls panel wired to each story’s arguments. The stories are grouped into nine categories, from Buttons and Boxed Lists to Navigation and View Switching.

It is the fastest way to see what a Libadwaita widget looks like and how its properties behave before you commit to it. It also demonstrates gjsify’s story format: describe a component once, in a file that imports no renderer, and you get a native GTK preview and a browser preview from it.

Live demo

Pick a widget in the sidebar, change its controls, watch it update. This is the browser rendering of the same stories the native window shows.

Run it

It declares all four runtimes, so pick the one you have:

gjsify showcase adwaita-storybook --runtime gjs
gjsify showcase adwaita-storybook --runtime node
gjsify showcase adwaita-storybook --runtime bun
gjsify showcase adwaita-storybook --runtime deno

A native GTK 4 window opens with real Adw.* widgets: an Adw.NavigationSplitView for the sidebar, and an Adw.Breakpoint that folds it into single-pane navigation when the window gets narrow. The window is the same on all four.

Under gjs the widgets come from GJS’s native gi://. Under node, bun and deno they come through the node-gi bridge, and one --app node bundle serves all three, so there is no per-runtime build and no third copy of a story. Leave the flag off and Choose the runtime says what the CLI picks.

From a checkout of the showcase, gjsify storybook does the same thing, and gjsify storybook --watch rebuilds and relaunches when you edit a story. It takes the same --runtime flag, and because it builds the bundle itself rather than fetching a published one, its default is whichever runtime the CLI is running on.

Run it in the browser

import { mount } from '@gjsify/example-gtk-adwaita-storybook/browser';

mount(document.getElementById('app')!, { title: 'Adwaita Storybook' });

mount() renders the storybook into any container through @gjsify/adwaita-storybook’s mountStorybook, from the same story list. It is responsive: the controls panel folds away below 1000px of container width, and below 620px the sidebar collapses to single-pane navigation.

Add your own story

A story is two small files plus one optional third. That split is what lets one description drive several renderers.

src/<category>/<name>.meta.ts holds the StoryMeta: title, category, and the controls that drive it. It imports no renderer, and it is the single source of truth.
src/<category>/<name>.story.ts is the GTK twin. It spreads the meta and names the widget: { ...meta, component: Adw.X.$gtype }.
src/browser/<category>/<name>.web.ts is the browser twin, a StoryElement that builds @gjsify/adwaita-web elements.

Because the controls are declared once, both targets expose the same knobs, and a native screenshot lines up with a browser screenshot. src/browser/stories.ts is the shared list that main.ts (standalone) and embed.ts (mount()) both read.

gjsify storybook finds every *.story.ts on its own. There is no storybook app to maintain. The settings it needs (application id, window title, story directory) live in the gjsify.storybook block of package.json.

What it uses

Package	What it provides
`@gjsify/stories`	The renderer-free `StoryMeta` contract both targets consume
`@gjsify/storybook`	The native GTK renderer behind `gjsify storybook`
`@gjsify/adwaita-web`	The Adwaita widget set as light-DOM custom elements: rows, buttons, carousel, tab and view switchers, navigation, dialogs
`@gjsify/adwaita-storybook`	The browser renderer: sidebar, preview, live controls, responsive collapse
`@gjsify/devtools`	D-Bus and MCP control, so you can screenshot and drive the native window from a script

Read the source

showcases/gtk/adwaita-storybook/

Adwaita widgets documents each widget you will find in the sidebar, with runnable snippets.
Storybook guide covers gjsify storybook in your own project.
Devtools shows how to drive and screenshot a story from outside the process.