A New Cross‑Platform UI Framework Boosts Performance Dramatically

Problems with Electron

Installation package typically exceeds 100 MB.

Idle memory starts around 300 MB and can reach 1 GB when multiple windows are opened.

Startup shows a white screen for 2–3 seconds before the UI appears.

Rendering large tables (≈100 k rows) causes severe lag.

Theme switching requires a reload or application restart.

GPUI Overview

GPUI is a Rust‑based UI framework released by the Zed editor team. It renders directly with the GPU via the wgpu abstraction, allowing selection of Metal, Vulkan, or DirectX 12 back‑ends. The framework offers a declarative DSL that feels like React but compiles to native machine code without a browser, virtual machine, or garbage collector.

Performance Comparison

Installation size : GPUI binaries start at 12 MB and can be shipped as a single file, compared with 100 MB+ for Electron.

Idle memory : GPUI stays around 50 MB even with many windows, whereas Electron consumes 300 MB on launch and climbs to 1 GB.

Startup latency : GPUI displays UI in roughly 0.4 seconds; Electron shows a white screen for 2–3 seconds.

Large data tables : GPUI scrolls 1 million rows at 60 fps; Electron stalls with 100 k rows.

Theme switching : GPUI hot‑switches dark/light mode with a single line of code; Electron requires reload or restart.

Getting Started in Five Minutes

Install Rust:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Create a new Cargo project: cargo new my-app && cd my-app Add GPUI dependencies to Cargo.toml:

[dependencies]
 gpui = "0.2"
 gpui-component = "0.1"

Write src/main.rs:

use gpui::*;

fn main() {
    App::new().run(|cx: &mut AppContext| {
        Window::new("win", cx)
            .title("My First GPUI Window")
            .build(cx, |cx| {
                Label::new("Hello, GPUI!", cx)
            })
            .unwrap();
    });
}

Run the program: cargo run After a few seconds the window appears without a white screen, behaving like a native application.

Component Model (React‑like DSL)

Button::new("Click to Order", cx)
    .style(ButtonStyle::Primary)
    .on_click(|_, cx| {
        println!("Order sent");
        notify_user("Deal!", cx);
    });

The button definition uses zero‑cost Rust abstractions; the compiled binary contains no browser, VM, or garbage‑collector pauses.

Embedding Existing Web Content

Enable the optional webview feature in Cargo.toml to embed a browser area inside a GPUI window:

gpui-component = { version = "0.1", features = ["webview"] }

This allows legacy React reports to be displayed without code changes.

Ready‑Made Component Library

GPUI‑component provides more than 60 pre‑built UI elements (buttons, tables, trees, calendars, Markdown viewers, transfer boxes, etc.) that follow the popular shadcn/ui design language, enabling designers to reuse existing assets and developers to copy‑paste components.

References

GPUI website: https://www.gpui.rs/ GPUI‑component documentation:

https://longbridge.github.io/gpui-component/