Why GTKX?
⚛️
React Components
Full React 19 support with hooks, state, effects, and the component model you already know.
🚀
Native Performance
No Electron. No WebView. Direct GTK4 bindings via Rust/Neon for true native speed.
🧩
Complete GTK4 API
Access every GTK4, Libadwaita, and GLib widget and function through typed bindings.
⚡
Hot Module Replacement
Instant feedback during development with Vite-powered HMR for rapid iteration.
🎨
CSS-in-JS
Style your apps with familiar CSS-in-JS patterns that compile to GTK CSS.
🧪
Testing & MCP
Test components with a Testing Library-like API and integrate AI agents via the built-in MCP server.
See it in Action
Build native GTK4 applications with familiar React patterns
Write React, Ship Native
Use the React you know — components, hooks, state management — to build real GTK4 desktop apps
import { GtkApplicationWindow, GtkBox, GtkButton, GtkLabel, quit } from "@gtkx/react";
import * as Gtk from "@gtkx/ffi/gtk";
import { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
return (
<GtkApplicationWindow title="Counter" defaultWidth={400} defaultHeight={300} onClose={quit}>
<GtkBox orientation={Gtk.Orientation.VERTICAL} valign={Gtk.Align.CENTER} spacing={20}>
<GtkLabel label={`Count: ${count}`} cssClasses={["title-1"]} />
<GtkButton label="Increment" onClicked={() => setCount(c => c + 1)} cssClasses={["pill", "suggested-action"]} />
</GtkBox>
</GtkApplicationWindow>
);
};