GPUI Kit

https://github.com/longbridge/gpui-kit
Admin
GPUI Kit is a comprehensive Rust desktop application framework built on GPUI that provides a...
Tokens:1,983,453
Snippets:13,942
Trust Score:9.9
Update:2 days ago
Show doc for...
Tokens:
Raw
### Run the stream-markdown example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/task.md

Run the example from the repository root after installing platform prerequisites. The window opens with a Replay button and a Fade in streamed text switch.

```sh
cargo run -p example-stream-markdown
```

--------------------------------

### gpui-kit application setup example

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/SKILL.md

Shows the minimal setup to initialize and run a gpui-kit application. Call `gpui_kit::init(cx)` first, then open a window with an `AppView`. Requires the `gpui_kit::assets::Assets` for asset loading.

```rust
use gpui_kit::*;

gpui_kit::application()
    .with_assets(gpui_kit::assets::Assets)
    .run(|cx| {
        gpui_kit::init(cx);                       // first, before anything else
        gpui_kit::open_window(options, cx, |window, cx| {
            cx.new(|cx| AppView::new(window, cx))
        })
        .expect("failed to open window");
    });
```

--------------------------------

### Run hello_world example with cargo run -p hello_world

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/installation.md

Run the existing hello_world example from the repository root to verify the installation. The first build may take several minutes; a window shows 'Hello, World!' and a 'Let's Go!' button, clicking prints 'Clicked!' in the terminal, and closing the window ends the process.

```sh
cargo run -p hello_world
```

--------------------------------

### Create a new GPUI multi-window project

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/multi-window.md

Initializes a new Rust project for the multi-window example. Requires the platform dependencies from the Installation guide.

```sh
cargo new gpui-multi-window
cd gpui-multi-window
```

--------------------------------

### Run hello_world binary

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/action.md

Run the example from the repository root. The window starts at Count: 0; press Enter while the counter region has focus or click Increment to increase the count by one.

```sh
cargo run -p hello_world --bin hello_world
```

--------------------------------

### Setup and run the gallery development server

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/webassembly.md

Run these commands from the repository root to install the WASM target, the pinned wasm-bindgen-cli, and start the Vite dev server. Keep `make dev` running and open http://localhost:3000/gallery/.

```sh
cd crates/story-web
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli --version 0.2.121
make dev
```

--------------------------------

### Run shared examples

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/getting-started.md

Run the native GPUI application for a primitive example. Replace `button` with a primitive slug from the primitive catalog.

```sh
cargo run -p gpui-base-examples -- button

```

--------------------------------

### Inno Setup script for Windows installer

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/packaging.md

Minimal unsigned Inno Setup script (packaging.iss) to create an installer for the Windows app. Save this as packaging.iss in the project root after staging dist\windows\hello_world.exe. Keep AppId stable for upgrades.

```ini
[Setup]
AppId=Example.HelloWorld
AppName=HelloWorld
AppVersion={{gpui_kit_version}}
DefaultDirName={autopf}\HelloWorld
DefaultGroupName=HelloWorld
OutputDir=dist
OutputBaseFilename=HelloWorld-Setup
ArchitecturesAllowed=x64compatible
ArchitecturesInstallIn64BitMode=x64compatible

[Files]
Source: "dist\windows\hello_world.exe"; DestDir: "{app}"; Flags: ignoreversion

[Icons]
Name: "{group}\HelloWorld"; Filename: "{app}\hello_world.exe"

[Run]
Filename: "{app}\hello_world.exe"; Description: "Launch HelloWorld"; Flags: nowait postinstall skipifsilent
```

--------------------------------

### Run the motion example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/motion.md

Run the interactive companion for the motion guide. It contains five separate demos accessible via tabs.

```bash
cargo run -p gpui-base-examples --bin motion
```

--------------------------------

### Install dependencies with bun install

Source: https://github.com/longbridge/gpui-kit/blob/main/website/README.md

Installs the project dependencies using Bun. Run this in the website directory before starting development.

```bash
bun install
```

--------------------------------

### Run Editor and Markdown highlighted by syntect example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the syntect example package with Cargo.

```bash
cargo run -p example-syntect
```

--------------------------------

### Run Dock example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the Dock example package with Cargo.

```bash
cargo run -p example-dock
```

--------------------------------

### Run HTML example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the HTML example package with Cargo.

```bash
cargo run -p example-html
```

--------------------------------

### Create and run a new application

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Creates a new application directory and starts the development server. The directory name is used as the application ID.

```bash
gpui-shell new clock
gpui-shell dev -d clock
```

--------------------------------

### Run the development server with bun run dev

Source: https://github.com/longbridge/gpui-kit/blob/main/website/README.md

Starts the local development server for the website. Requires dependencies to be installed first.

```bash
bun run dev
```

--------------------------------

### Run Markdown example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the Markdown example package with Cargo.

```bash
cargo run -p example-markdown
```

--------------------------------

### Run the webview example

Source: https://github.com/longbridge/gpui-kit/blob/main/crates/webview/README.md

Run the example webview crate from the repository root. This command launches the example application.

```bash
cargo run -p webview
```

--------------------------------

### Run a single standalone example

Source: https://github.com/longbridge/gpui-kit/blob/main/CONTRIBUTING.md

Run a specific example package directly. See the examples README for available commands.

```bash
cargo run -p example-editor
```

--------------------------------

### Setup environment with WASM target, wasm-bindgen-cli, and Bun

Source: https://github.com/longbridge/gpui-kit/blob/main/crates/story-web/README.md

Prerequisites for GPUI Component Story: install the WASM target `wasm32-unknown-unknown`, install `wasm-bindgen-cli` via Cargo, and install Bun (for macOS/Linux). These commands are run before developing or building the gallery.

```bash
# Add WASM target
rustup target add wasm32-unknown-unknown

# Install wasm-bindgen-cli
cargo install wasm-bindgen-cli

# Install Bun (macOS/Linux)
curl -fsSL https://bun.sh/install | bash
```

--------------------------------

### Run Touch selection example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the touch_selection example package with Cargo.

```bash
cargo run -p touch_selection
```

--------------------------------

### Run Brush example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the Brush example package with Cargo.

```bash
cargo run -p example-brush
```

--------------------------------

### Run the Brush example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/paint.md

Run the existing Brush example from the repository root.

```sh
cargo run -p example-brush
```

--------------------------------

### Create staging directories and copy binary

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/packaging.md

Commands to create the Debian package staging directories and install the example binary with mode 0755. Supply your own application icon.

```sh
mkdir -p dist/deb-root/DEBIAN \
  dist/deb-root/usr/lib/hello-world-gpui \
  dist/deb-root/usr/share/applications \
  dist/deb-root/usr/share/icons/hicolor/256x256/apps
install -m 0755 target/release/hello_world \
  dist/deb-root/usr/lib/hello-world-gpui/hello_world
```

--------------------------------

### Run the editor example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/editor.md

Use this command to run the editor example from the gpui-base-examples package. It launches the application with the editor primitives.

```bash
cargo run -p gpui-base-examples -- editor
```

--------------------------------

### Run GPUI Base WASM showcase

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/webassembly.md

Commands to set up and run the GPUI Base WASM example from the repository root. Requires installing the matching wasm-bindgen-cli version and adding the nightly WASM target. After running, keep the server running and open http://localhost:3001/examples/base/.

```sh
cd crates/base/examples/wasm
rustup target add wasm32-unknown-unknown --toolchain nightly
cargo install wasm-bindgen-cli --version 0.2.121
make dev
```

--------------------------------

### Run Large text example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the Large text example package with Cargo.

```bash
cargo run -p example-large-text
```

--------------------------------

### Run Text selection example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the text_selection example package with Cargo.

```bash
cargo run -p text_selection
```

--------------------------------

### gpui-shell command usage

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Lists all gpui-shell commands and their options. Use `gpui-shell run` to launch an app, `dev` for development with reload, `new` to create a blank app, `list` to show installed apps, `check` to validate without a window, `types` to generate TypeScript definitions, `agents` to output coding agent instructions, and `bundle` to package a desktop app. Options like `--watch`, `--dev`, `--packaged`, and `--print-spec` modify behavior.

```text
gpui-shell run [<name> | -d <directory>] [--watch] [--dev] [--packaged]
gpui-shell dev [<name> | -d <directory>] [--dev]
gpui-shell
gpui-shell new <directory>
gpui-shell list
gpui-shell check <name> | -d <directory> [--print-spec]
gpui-shell types <name> | -d <directory>
gpui-shell agents [<name> | -d <directory>]
gpui-shell bundle [<name> | -d <directory>] [--platform <platform>] [--icon <png>]
                  [--out <directory>] [--download-url <url>]
gpui-shell --help | --version
```

--------------------------------

### Run Popover Example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/popover.md

Command to run the popover example from the gpui-base-examples crate.

```bash
cargo run -p gpui-base-examples -- popover
```

--------------------------------

### Run Streaming Markdown example

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/README.md

Runs the Streaming Markdown example package with Cargo.

```bash
cargo run -p example-stream-markdown
```

--------------------------------

### Run the textarea example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/textarea.md

Runs the textarea example from the gpui-base-examples package.

```bash
cargo run -p gpui-base-examples -- textarea
```

--------------------------------

### Initialize gpui-base

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/getting-started.md

Call gpui_kit::base::init once before opening windows. If gpui_kit::component::init is already called, base initialization is included.

```rust
use gpui_kit::AppContext as _;

fn main() {
    gpui_platform::application().run(|cx| {
        gpui_kit::base::init(cx);
        // Open your application window here.
    });
}

```

--------------------------------

### Build the runtime yourself

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Initializes the library, builds a runtime, grants capabilities, and mounts a script View under a ShellRoot. Capabilities default to empty; the host must explicitly grant permissions.

```rust
use gpui_shell::{Capabilities, ShellRuntime};

gpui_platform::application()
    .with_assets(gpui_shell::AppAssets::new(root.clone()))
    .run(move |cx| {
        // Initializes gpui-base, the shell's default token palette, and the
        // style reflection table.
        gpui_shell::init(cx);

        let runtime = ShellRuntime::new(cx).expect("script runtime");

        // The data directory the gpui-shell command used: the manifest `id`.
        let data = gpui_shell::set_bundle_id("com.example.clock").expect("data directory");

        // Nothing is permitted until the host says so.
        gpui_shell::set_capabilities(
            Capabilities::new()
                .read_roots([root.clone()])
                .write_roots([data.clone()])
                .storage(true),
        );

        cx.open_window(Default::default(), move |window, cx| {
            runtime.load(&root, window, cx)
        })
        .expect("window");
    });
```

--------------------------------

### Clone and build the iOS example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/mobile.md

Clone the gpui-mobile repository, check out the pinned revision, and run the build script for the iOS simulator. The script builds the Rust static library, generates the Xcode project, and installs and launches the app in a simulator. Add --no-run to build only, or --release for a release build.

```sh
git clone https://github.com/longbridge/gpui-mobile.git
cd gpui-mobile
git checkout 0b882efdac7f524e0bb0b1d4c886b2aa752f9f20
cd example
./build.sh ios --simulator
```

--------------------------------

### Run the focus_trap example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/focus.md

Run this command from the repository root to execute the focus_trap example. The example demonstrates focus containment within numbered areas using `.focus_trap(id, &handle)`.

```sh
cargo run -p focus_trap
```

--------------------------------

### Run the input example with cargo run

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/input.md

Runs the input showcase example from the gpui-base-examples package. The implementation lives in crates/base/examples/showcase/components/input.rs.

```bash
cargo run -p gpui-base-examples -- input
```

--------------------------------

### Run the motion example

Source: https://github.com/longbridge/gpui-kit/blob/main/crates/base/examples/README.md

Run the separate motion example binary, which demonstrates continuous behavior with focused pages for transitions, springs, keyframes, presence, stagger, and sequences.

```bash
cargo run -p gpui-base-examples --bin motion
```

--------------------------------

### Run text selection showcase example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/text-selection.md

Run the complete runnable text selection showcase example used by both the native command and the live Rust/WASM preview. The example source is at crates/base/examples/showcase/components/text_selection.rs.

```bash
cargo run -p gpui-base-examples -- text-selection
```

--------------------------------

### Replace examples/hello_world/src/main.rs with two-window global observer example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/global.md

Complete Rust example for the `examples/hello_world` workspace package. Run with `cargo run -p hello_world --bin hello_world` from the repository root; no new package or dependency is needed. It installs an `AppSettings` global before opening two windows, creates a `SettingsView` per window, and uses `cx.observe_global::<AppSettings>` to notify each view on global changes. The `Toggle shared setting` button updates the global via `update_global`, while the `Increment local clicks` button mutates only the local `local_clicks` field and calls `cx.notify()`.

```rust
use gpui_kit::*;
use gpui_kit::assets::Assets;
use gpui_kit::component::button::Button;

struct AppSettings {
    notifications_enabled: bool,
}

impl Global for AppSettings {}

struct SettingsView {
    _settings_observer: Subscription,
    local_clicks: usize,
    name: &'static str,
}

impl SettingsView {
    fn new(name: &'static str, cx: &mut Context<Self>) -> Self {
        let _settings_observer = cx.observe_global::<AppSettings>(|_this, cx| {
            cx.notify();
        });
        Self {
            _settings_observer,
            local_clicks: 0,
            name,
        }
    }
}

impl Render for SettingsView {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let enabled = cx.global::<AppSettings>().notifications_enabled;

        div()
            .flex()
            .flex_col()
            .gap_2()
            .p_4()
            .child(format!("{}: notifications {}", self.name, if enabled { "on" } else { "off" }))
            .child(format!("Clicks in this window: {}", self.local_clicks))
            .child(
                Button::new("toggle-notifications")
                    .label("Toggle shared setting")
                    .on_click(|_, _window, cx| {
                        cx.update_global::<AppSettings, _>(|settings, _cx| {
                            settings.notifications_enabled = !settings.notifications_enabled;
                        });
                    }),
            )
            .child(
                Button::new("local-click")
                    .label("Increment local clicks")
                    .on_click(cx.listener(|this, _, _, cx| {
                        this.local_clicks += 1;
                        cx.notify();
                    })),
            )
    }
}

fn main() {
    application()
        .with_assets(Assets)
        .run(|cx| {
            init(cx);
            cx.set_global(AppSettings {
                notifications_enabled: true,
            });

            for name in ["First window", "Second window"] {
                open_window(WindowOptions::default(), cx, move |_, cx| {
                    cx.new(|cx| SettingsView::new(name, cx))
                })
                .expect("failed to open window");
            }
        });
}
```

--------------------------------

### Run OTP Input example with cargo run

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/otp-input.md

Runs the OTP Input showcase example from the gpui-base examples crate.

```bash
cargo run -p gpui-base-examples -- otp-input
```

--------------------------------

### Run Toggle Example with Cargo

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/toggle.md

Runs the Toggle showcase example using the native Cargo entrypoint. Requires the gpui-base-examples package.

```bash
cargo run -p gpui-base-examples -- toggle
```

--------------------------------

### Input state setup, rendering, and event subscription

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/references/usage.md

Shows how to create an InputState with placeholder and default value, render Input with various options (cleanable, disabled, prefix, suffix, content type, mask toggle, appearance), read the value, and subscribe to input events (Change, PressEnter, Focus, Blur).

```rust
use gpui_kit::component::input::{Input, InputState};

// State setup (in new/init)
let input = cx.new(|cx| InputState::new(window, cx)
    .placeholder("Enter text...")
    .default_value("Hello")
);

// Render
Input::new(&input)
Input::new(&input).cleanable(true)           // clear button
Input::new(&input).disabled(true)
Input::new(&input).prefix(Icon::new(IconName::Search).small())
Input::new(&input).suffix(Button::new("b").ghost().icon(IconName::Close).xsmall())
Input::new(&input).content_type(InputContentType::Password)
Input::new(&input).mask_toggle()             // password reveal toggle
Input::new(&input).appearance(false)         // remove default border/bg

// Reading value
let value = input.read(cx).value();

// Keep this subscription in the owning view (for example, `_subscriptions`).
self._subscriptions.push(cx.subscribe_in(&input, window, |view, state, event, window, cx| {
    match event {
        InputEvent::Change => { let v = state.read(cx).value(); }
        InputEvent::PressEnter { .. } => { /* submit */ }
        InputEvent::Focus | InputEvent::Blur => {}
    }
}));
```

--------------------------------

### Install gpui-base and GPUI dependencies

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/getting-started.md

Add gpui-base, gpui, and gpui_platform to Cargo.toml. Use the repository revision of GPUI that matches gpui-base. gpui_platform requires the font-kit feature.

```toml
[dependencies]
gpui-base = { git = "https://github.com/longbridge/gpui-kit" }
gpui = { git = "https://github.com/zed-industries/zed" }
gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit"] }

```

--------------------------------

### Sync documentation guides to skills directories

Source: https://github.com/longbridge/gpui-kit/blob/main/AGENTS.md

Copy the English documentation guides to the vendored skill reference files after editing the originals in website/docs/. Never edit the copies directly.

```bash
cp website/docs/design-guides.md skills/gpui-kit-design-guides/references/design-guides.md
cp website/docs/coding-guides.md skills/gpui-kit/references/coding-guides.md
```

--------------------------------

### Run the virtual-list base example with cargo

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/virtual-list.md

Command to run the GPUI base example for the virtual list. Executes the example binary named 'virtual-list' from the 'gpui-base-examples' package.

```bash
cargo run -p gpui-base-examples -- virtual-list
```

--------------------------------

### Run a stateful View with Render

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/render.md

Complete example replacing src/main.rs in a Getting Started project. It defines a Chat struct with messages, implements Render to build a UI with two buttons, and runs the application. The buttons use cx.listener to mutate state and call cx.notify() to trigger re-renders.

```rust
use gpui_kit::*;
use gpui_kit::component::button::Button;

#[derive(Default)]
struct Chat {
    messages: Vec<SharedString>,
}

impl Chat {
    fn add(&mut self, cx: &mut Context<Self>) {
        self.messages
            .push(format!("Message {}", self.messages.len() + 1).into());
        cx.notify();
    }

    fn clear(&mut self, cx: &mut Context<Self>) {
        if !self.messages.is_empty() {
            self.messages.clear();
            cx.notify();
        }
    }
}

impl Render for Chat {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .size_full()
            .gap_2()
            .p_4()
            .child(format!("Messages: {}", self.messages.len()))
            .child(
                Button::new("add-message")
                    .label("Add message")
                    .on_click(cx.listener(|this, _, _, cx| this.add(cx))),
            )
            .child(
                Button::new("clear-messages")
                    .label("Clear")
                    .on_click(cx.listener(|this, _, _, cx| this.clear(cx))),
            )
            .children(
                self.messages
                    .iter()
                    .cloned()
                    .map(|message| div().child(message)),
            )
    }
}

fn main() {
    application()
        .with_assets(assets::Assets)
        .run(|cx| {
            init(cx);
            open_window(WindowOptions::default(), cx, |_, cx| {
                cx.new(|_| Chat::default())
            })
            .expect("Failed to open window");
        });
}
```

--------------------------------

### Application Setup

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/SKILL.md

Initializes the gpui-kit application with assets and opens a window with an AppView.

```APIDOC
## Application Setup

### Description
Initializes the gpui-kit application with assets and opens a window with an AppView.

### Usage
```rust
use gpui_kit::*;

gpui_kit::application()
    .with_assets(gpui_kit::assets::Assets)
    .run(|cx| {
        gpui_kit::init(cx);                       // first, before anything else
        gpui_kit::open_window(options, cx, |window, cx| {
            cx.new(|cx| AppView::new(window, cx))
        })
        .expect("failed to open window");
    });
```

### Notes
- `gpui_kit::init(cx)` must be called before anything else.
- `open_window` returns a `Result` that should be handled.
```

--------------------------------

### Run standalone examples with cargo run -p

Source: https://github.com/longbridge/gpui-kit/blob/main/README.md

Runs standalone examples from the `examples` directory, each focused on a single feature. Includes code editor, hello world, system monitor, and window title examples.

```bash
# Code editor with LSP support and syntax highlighting
cargo run -p example-editor

# Basic hello world
cargo run -p hello_world

# System monitor (real-time charts with CPU/memory data)
cargo run -p system_monitor

# Window title customization
cargo run -p window_title
```

--------------------------------

### Complete Profile view for keyboard navigation exercise

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/accessibility.md

Complete example to replace in examples/hello_world/src/main.rs for manual keyboard testing. Run with cargo run -p hello_world. Includes Profile struct, Render impl, and main function. Restore the file after the exercise.

```rust
use gpui_kit::{
    AppContext, Context, Entity, Role, SharedString, Window, WindowOptions,
    component::{button::Button, input::{Input, InputState}},
    div, prelude::*, px,
};

struct Profile {
    name: Entity<InputState>,
    submitted: Option<SharedString>,
}

impl Render for Profile {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let status = self.submitted.as_ref().map_or_else(
            || SharedString::from("Not saved"),
            |name| SharedString::from(format!("Saved: {name}")),
        );

        div()
            .flex()
            .flex_col()
            .p_4()
            .gap_4()
            .child(
                div().flex().flex_col().gap_1().child("Profile name").child(
                    Input::new(&self.name)
                        .id("name")
                        .aria_label("Profile name")
                        .w(px(240.)),
                ),
            )
            .child(Button::new("save").label("Save").on_click(
                cx.listener(|this, _, _, cx| {
                    this.submitted = Some(this.name.read(cx).value());
                    cx.notify();
                }),
            ))
            .child(
                div()
                    .id("status")
                    .role(Role::Status)
                    .aria_label(status.clone())
                    .child(status),
            )
    }
}

fn main() {
    gpui_kit::application().run(|cx| {
        gpui_kit::init(cx);
        gpui_kit::open_window(WindowOptions::default(), cx, |window, cx| {
            cx.new(|cx| Profile {
                name: cx.new(|cx| InputState::new(window, cx)),
                submitted: None,
            })
        })
        .expect("failed to open window");
    });
}
```

--------------------------------

### Run larger examples as standalone packages

Source: https://github.com/longbridge/gpui-kit/blob/main/README.md

Runs larger examples that reuse the `story` gallery components as standalone packages. Includes dock layout, Markdown rendering, and HTML rendering examples.

```bash
# Dock layout system (panels, split views, tabs)
cargo run -p example-dock

# Markdown rendering
cargo run -p example-markdown

# HTML rendering
cargo run -p example-html
```

--------------------------------

### Component Initialization Example

Source: https://github.com/longbridge/gpui-kit/blob/main/AGENTS.md

Example of initializing GPUI Kit before opening windows. Call `gpui_kit::init(cx)` before opening windows that use styled components; it includes Base initialization and registers Component's window extension.

```rust
fn main() {
    gpui_kit::application().run(|cx| {
        gpui_kit::init(cx);
        gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| {
            cx.new(|_| MyView)
        })
        .expect("Failed to open window");
    });
}
```

--------------------------------

### Register native module and run host

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Registers a native module with a greet function and starts the host with a brand and components. Modules must be registered before calling main_with_brand_and_components.

```rust
use gpui_shell::{HostModule, HostValue, host::HostBrand};

fn main() {
    gpui_shell::export_module(
        HostModule::new("native")
            .declarations("export function greet(name: string): string;")
            .function("greet", |arguments| {
                let name = arguments.string(0)?;
                Ok(HostValue::from(format!("Hello, {name}")))
            }),
    )
    .expect("register the native module");

    let components = gpui_shell::components::components().expect("component catalog");
    gpui_shell::host::main_with_brand_and_components(
        HostBrand::new("clock", env!("CARGO_PKG_VERSION")),
        components,
    );
}
```

--------------------------------

### Build the hello_world example with cargo build --release --locked

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/packaging.md

Builds the existing example from the repository root. The output is target/release/hello_world on macOS/Linux or target\release\hello_world.exe on Windows. Keep the Cargo.lock and record target OS, CPU architecture, app version, and build revision.

```sh
cargo build --release --locked -p hello_world
```

--------------------------------

### Run Toast showcase example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/toast.md

Runs the native Toast example from the gpui-base-examples package. The command selects the Toast primitive from the shared showcase implementation.

```bash
cargo run -p gpui-base-examples -- toast
```

--------------------------------

### TreeEntry::depth()

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/tree.md

Gets the depth of the item in the tree. This method returns the hierarchical depth.

```APIDOC
## TreeEntry::depth()

### Description
Gets the item depth in the tree.

### Method
Getter

### Returns
The depth of the item.
```

--------------------------------

### Bash command: run text-view example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/text-view.md

Runs the text-view example using cargo with the gpui-base-examples package.

```bash
cargo run -p gpui-base-examples -- text-view
```

--------------------------------

### TreeEntry::item()

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/tree.md

Gets the source TreeItem for this entry. This method returns the underlying tree item.

```APIDOC
## TreeEntry::item()

### Description
Gets the source TreeItem.

### Method
Getter

### Returns
The source `TreeItem`.
```

--------------------------------

### Run the complete story examples gallery

Source: https://github.com/longbridge/gpui-kit/blob/main/CONTRIBUTING.md

Use `cargo run` to run all story examples and display them in a gallery of GPUI components. Useful for testing existing features.

```bash
cargo run
```

--------------------------------

### TreeState::selected_entry()

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/tree.md

Gets the currently selected entry. This method returns the selected tree entry.

```APIDOC
## TreeState::selected_entry()

### Description
Gets the currently selected entry.

### Method
Getter

### Returns
The currently selected entry.
```

--------------------------------

### Complete hello_world example with bundled font

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/fonts.md

A complete example for the hello_world app that registers a bundled font, verifies registration, sets the theme font, and opens a window. Run with cargo run -p hello_world from the repository root.

```rust
use std::borrow::Cow;

use gpui_kit::component::theme::Theme;
use gpui_kit::*;

struct FontLab;

impl Render for FontLab {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .gap_2()
            .p_4()
            .child("Theme font: Inter Variable")
            .child(
                div()
                    .font_family(".SystemUIFont")
                    .child("System UI font for comparison"),
            )
    }
}

fn main() {
    application().run(|cx| {
        init(cx);
        cx.text_system()
            .add_fonts(vec![Cow::Borrowed(
                include_bytes!("../../../crates/story-web/fonts/Inter-Regular.ttf").as_slice(),
            )])
            .expect("Failed to load bundled font");

        let families = cx.text_system().all_font_names();
        assert!(families.iter().any(|family| family == "Inter Variable"));
        println!("Registered font: Inter Variable");

        Theme::update(cx, |theme| theme.font_family = "Inter Variable".into());
        open_window(WindowOptions::default(), cx, |_, cx| cx.new(|_| FontLab))
            .expect("Failed to open window");
    });
}
```

--------------------------------

### Run Slider showcase example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/slider.md

Runs the Slider example from the native Cargo entrypoint. The same showcase is compiled for the WASM preview.

```bash
cargo run -p gpui-base-examples -- slider
```

--------------------------------

### Run Color Picker Example

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/primitives/color-picker.md

Runs the color picker example from the native Cargo entrypoint. The same showcase is compiled once for the WASM preview.

```bash
cargo run -p gpui-base-examples -- color-picker
```

--------------------------------

### Depend on gpui-shell crate

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Add the published gpui-shell crate as a dependency to create a custom Rust host binary.

```toml
[dependencies]
gpui-shell = "0.9.1"
```

--------------------------------

### Menu Bar Shortcuts Setup

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/references/gpui/action.md

Shows how to bind keys and set up the menu bar. Bind keys first, then call cx.set_menus. Rebuild menus when keymap changes.

```rust
pub fn init(cx: &mut App) {
    // 1. Bindings first — the menu items copy their shortcuts from these.
    cx.bind_keys([
        KeyBinding::new("cmd-n", NewChat, None),
        KeyBinding::new("cmd-,", OpenSettings, None),
        KeyBinding::new("cmd-q", Quit, None),
    ]);

    // 2. Then the menu bar.
    cx.set_menus(vec![Menu {
        name: "File".into(),
        items: vec![
            MenuItem::action("New Chat", NewChat),
            MenuItem::action("Settings…", OpenSettings),
            MenuItem::separator(),
            MenuItem::action("Quit", Quit),
        ],
    }]);
}
```

--------------------------------

### TextView::markdown_extensions

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/text-view.md

Sets the markdown extensions to use for parsing. The extensions start with CommonMark/GFM-compatible parsing and can be customized, for example to enable YAML frontmatter.

```APIDOC
## TextView::markdown_extensions

### Description
Sets the markdown extensions to use for parsing. The extensions start with CommonMark/GFM-compatible parsing and can be customized, for example to enable YAML frontmatter.

### Method
Builder method

### Signature
```rust
fn markdown_extensions(self, extensions: MarkdownExtensions) -> Self
```

### Parameters
- `extensions` (MarkdownExtensions) - Required - The markdown extensions configuration.

### Returns
- `Self` - The text view builder for chaining.

### Example
```rust
use gpui_base::{MarkdownExtensions, TextView};

let extensions = MarkdownExtensions::default().frontmatter();

TextView::markdown("metadata", source)
    .markdown_extensions(extensions)
```
```

--------------------------------

### Run the app with gpui-shell run

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Launches the application from the command line. The command expects a directory containing a main.js file.

```bash
gpui-shell run ./hello
```

--------------------------------

### Quick Example: Hello World with gpui-kit

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/index.md

Create a new Rust project with `cargo new gpui-hello`, add the `gpui-kit` dependency, and replace `src/main.rs` with this complete application. Run `cargo run` to display a window with a label and button; clicking the button prints `Clicked!` in the terminal.

```toml
[dependencies]
gpui-kit = "{{gpui_kit_version}}"
```

```rust
use gpui_kit::component::button::{Button, ButtonVariants};
use gpui_kit::*;

struct HelloWorld;

impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .flex()
            .flex_col()
            .size_full()
            .items_center()
            .justify_center()
            .gap_2()
            .child("Hello, World!")
            .child(
                Button::new("hello")
                    .primary()
                    .label("Click me")
                    .on_click(|_, _, _| println!("Clicked!")),
            )
    }
}

fn main() {
    application()
        .with_assets(assets::Assets)
        .run(|cx| {
            init(cx);

            open_window(WindowOptions::default(), cx, |_, cx| {
                cx.new(|_| HelloWorld)
            })
            .expect("Failed to open window");
        });
}
```

--------------------------------

### TreeState::selected_item(item, cx)

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/tree.md

Gets the currently selected tree item. This method returns the selected item.

```APIDOC
## TreeState::selected_item(item, cx)

### Description
Gets the currently selected tree item.

### Method
Getter

### Parameters
- **item** - Required - The tree item to get.
- **cx** - Required - Context for the operation.

### Returns
The currently selected tree item.
```

--------------------------------

### CalendarState.value() / set_value(next)

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/api.md

Gets or sets the selection: a single day, a [start, end] range, or null. Use these to manage the selected date(s).

```APIDOC
## CalendarState.value() / set_value(next)

### Description
Gets or sets the selection: a single day, a [start, end] range, or null.

### Method
value() / set_value(next)

### Parameters
- **next** (string or [string, string] or null) - The new selection value.

### Returns
- **value()** (string or [string, string] or null) - The current selection.
```

--------------------------------

### Basic HelloWorld application

Source: https://github.com/longbridge/gpui-kit/blob/main/README.md

Shows a minimal GPUI Kit application with a button. gpui_kit::open_window is the entry point and always mounts a Base Root; gpui_kit::init must be called before using any GPUI Component features.

```rust
use gpui_kit::component::button::*;
use gpui_kit::component::*;
use gpui_kit::*;

pub struct HelloWorld;
impl Render for HelloWorld {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div()
            .v_flex()
            .gap_2()
            .size_full()
            .items_center()
            .justify_center()
            .child("Hello, World!")
            .child(
                Button::new("ok")
                    .primary()
                    .label("Let's Go!")
                    .on_click(|_, _, _| println!("Clicked!")),
            )
    }
}

fn main() {
    gpui_kit::application().run(move |cx| {
        // This must be called before using any GPUI Component features.
        gpui_kit::init(cx);

        gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| {
            cx.new(|_| HelloWorld)
        })
        .expect("Failed to open window");
    });
}
```

--------------------------------

### Run bundled example with cargo run

Source: https://github.com/longbridge/gpui-kit/blob/main/crates/shell/README.md

Runs the bundled example from the repository root. The runtime loads main.js from the given directory and mounts its default-exported view class as the window's root view.

```bash
cargo run -p gpui-shell -- run examples/js_todolist
```

--------------------------------

### Import native module in script

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Script that imports the native module and calls the greet function, expecting "Hello, world".

```javascript
import { greet } from "native";

greet("world"); // "Hello, world"
```

--------------------------------

### Run the example-dock workspace

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/dock.md

Run the complete workspace example with edge docks, runtime panel operations, layout persistence, and keyboard actions using cargo run -p example-dock.

```sh
cargo run -p example-dock
```

--------------------------------

### Print or write coding agent instructions

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Prints the rules for coding agents or writes them to an AGENTS.md file. The -d flag specifies the target directory.

```bash
gpui-shell agents                 # print them
gpui-shell agents -d ./hello      # write ./hello/AGENTS.md
```

--------------------------------

### Responsive layout with fixed and flexible panes

Source: https://github.com/longbridge/gpui-kit/blob/main/website/docs/style.md

Complete program for examples/hello_world/src/main.rs that builds a responsive layout: a fixed-width navigation rail in wide windows and a stacked layout below 600 logical pixels. Uses h_flex, v_flex, FluentBuilder, and a scrollable document list. Run with cargo run -p hello_world from the repository root.

```rust
use gpui_kit::*;
use gpui_kit::component::{h_flex, v_flex, ActiveTheme as _};
use gpui_kit::prelude::FluentBuilder as _;

struct StyleExample;

impl Render for StyleExample {
    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let compact = window.viewport_size().width < px(600.);
        let layout = if compact { v_flex() } else { h_flex() };
        let documents = (1..=60).map(|number| {
            div().p_2().child(format!("Document {number:02}"))
        });

        layout
            .items_stretch()
            .size_full()
            .bg(cx.theme().background)
            .text_color(cx.theme().foreground)
            .child(
                v_flex()
                    .when(!compact, |nav| nav.w_64().flex_shrink_0())
                    .p_3()
                    .gap_2()
                    .child("Navigation")
                    .child("Overview · Documents"),
            )
            .child(
                v_flex()
                    .flex_1()
                    .min_w_0()
                    .min_h_0()
                    .child(h_flex().p_3().child("Documents"))
                    .child(
                        v_flex()
                            .id("document-list")
                            .flex_1()
                            .min_h_0()
                            .overflow_y_scroll()
                            .child(v_flex().p_3().gap_2().children(documents)),
                    ),
            )
    }
}

fn main() {
    gpui_kit::application().run(|cx| {
        gpui_kit::init(cx);
        gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| {
            cx.new(|_| StyleExample)
        })
        .expect("failed to open window");
    });
}
```

--------------------------------

### Disable Date Interval with Matcher::interval

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/date-picker.md

Disables a date interval starting from the current date for five days using Matcher::interval. Assumes 'now' is defined as in the previous example.

```rust
let date_picker = cx.new(|cx| {
    DatePickerState::new(window, cx)
        .disabled_matcher(calendar::Matcher::interval(
            Some(now),
            now.checked_add_days(Days::new(5))
        ))
});

DatePicker::new(&date_picker)
```

--------------------------------

### Cargo.toml dependency setup

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/references/usage.md

Adds the gpui-kit crate as a dependency, which re-exports GPUI, platform, base, component, and default icons. Shell is a separate host dependency.

```toml
[dependencies]
gpui-kit = "0.7" # re-exports GPUI, platform, base, component and the default icons; Shell is a separate host dependency
```

--------------------------------

### Programmatic Tree Control

Source: https://github.com/longbridge/gpui-kit/blob/main/website/component/tree.md

Shows how to programmatically get the current selection, set selection by index or item, scroll to a specific item, and clear selection.

```rust
// Get current selection
if let Some(entry) = tree_state.read(cx).selected_entry() {
    println!("Current selection: {}", entry.item().label);
}

// Set selection programmatically (by selected_index)
tree_state.update(cx, |state, cx| {
    state.set_selected_index(Some(2), cx); // Select third item
});

// Set selection programmatically (by tree item)
tree_state.update(cx, |state, cx| {
    state.set_selected_item(Some(item), cx); // Select third item
});

// Scroll to specific item
tree_state.update(cx, |state, _| {
    state.scroll_to_item(5, gpui_kit::ScrollStrategy::Center);
});

// Clear selection (by selected_index)
tree_state.update(cx, |state, cx| {
    state.set_selected_index(None, cx);
});

// Clear selection (by tree item)
tree_state.update(cx, |state, cx| {
    state.set_selected_item(None, cx);
});
```

--------------------------------

### Print the element description built by check

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Adds --print-spec to the check command to output the arena's debug dump of the component tree and recorded operations.

```bash
gpui-shell check ./hello --print-spec
```

--------------------------------

### Build a center layout with DockLayout::h_split and panel_handle

Source: https://github.com/longbridge/gpui-kit/blob/main/docs/ARCHITECTURE.md

Constructs a center layout tree using DockLayout::h_split, tabs, and panel_handle, then installs it via DockArea::set_center. The example is marked as Rust code with ignore.

```rust
let center = DockLayout::h_split()
    .child(DockLayout::tabs().panel_view(panel_handle(files), cx), Some(px(240.)))
    .child(DockLayout::tabs().panel_view(panel_handle(editor), cx), None);
dock_area.update(cx, |area, cx| area.set_center(center, window, cx));
```

--------------------------------

### Tooltip component usage with delay and defaults

Source: https://github.com/longbridge/gpui-kit/blob/main/skills/gpui-kit/references/usage.md

Shows how to add tooltips to elements and buttons. Component tooltips open after 500 ms by default; override with tooltip_show_delay or install TooltipDefaults app-wide.

```rust
// On any element with .id(), add .tooltip():
div()
    .id("my-btn")
    .tooltip(|window, cx| Tooltip::new("Delete item").build(window, cx))
    .child("Delete")

// Or on a Button directly:
Button::new("btn").icon(IconName::Trash).tooltip("Delete")

// Component tooltips open after 500 ms; override per trigger,
// or install `tooltip::TooltipDefaults` to change it app-wide:
Button::new("help").icon(IconName::Info).tooltip("Help")
    .tooltip_show_delay(Duration::ZERO)
```

--------------------------------

### Packaged application directory layout

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Shows the directory structure for a standalone desktop application packaged with gpui-shell. The binary is placed in MacOS/ and the application directory in Resources/app/, with gpui-shell.json and main.js inside.

```text
Clock.app/Contents/
├── Info.plist          # CFBundleExecutable = gpui-shell
├── MacOS/gpui-shell
└── Resources/app/
    ├── gpui-shell.json
    └── main.js
```

--------------------------------

### Apply default color tokens

Source: https://github.com/longbridge/gpui-kit/blob/main/website/base/getting-started.md

Use ColorTokens::light() or ColorTokens::dark() to match the application's appearance. ColorTokens::default() uses the light palette. Assign the palette to Theme::global_mut(cx).tokens.colors.

```rust
use gpui_kit::base::{ColorTokens, Theme};

// Pick the palette that matches the application's current appearance.
let colors = if is_dark {
    ColorTokens::dark()
} else {
    ColorTokens::light()
};

Theme::global_mut(cx).tokens.colors = colors;

```

--------------------------------

### Check repository loading with --check

Source: https://github.com/longbridge/gpui-kit/blob/main/examples/tig/README.md

Runs the example-tig binary with the --check flag to verify repository loading without opening a window. Replace /path/to/repository with the actual path.

```sh
cargo run -p example-tig -- --check /path/to/repository
```

--------------------------------

### Generate TypeScript declarations with gpui-shell types

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Run this command to generate a `gpui-kit.d.ts` file next to the application. The declarations are generated from the runtime's dispatch tables, so they are accurate and deterministic. Regenerate after upgrading the runtime to keep the diff reviewable.

```bash
gpui-shell types ./hello
```

--------------------------------

### Check a script without running it

Source: https://github.com/longbridge/gpui-kit/blob/main/website/shell/getting-started.md

Loads and renders the application in a hidden window, exiting 0 on success and 1 on failure. Catches syntax errors, unresolved imports, malformed exports, unknown style methods, and reused elements.

```bash
gpui-shell check ./hello
```
Tokens:
Raw