import { render, ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";i...

⚛️

React

Hooks, state, props, and components you already know. Write JSX that renders as native GTK4 widgets.

🔥

Hot Reload

Edit code and see changes instantly. Vite-powered HMR with no app restart needed.

🚀

Native

Direct FFI bindings to GTK4 via Rust and libffi. No Electron, no web views.

⚡

CLI

npx @gtkx/cli@latest create scaffolds a project with TypeScript, testing, and HMR ready to go.

🎨

CSS-in-JS

Emotion-style css template literals for GTK widgets. Compose and reuse styles easily.

🧪

Testing

Testing Library-style API with screen, userEvent, and queries for GTK widgets.

Simple and Familiar

Write React components that render as native GTK4 widgets

import { render, ApplicationWindow, Box, Button, Label, quit } from "@gtkx/react";import { Orientation } from "@gtkx/ffi/gtk";import { css } from "@gtkx/css";import { useState } from "react";const primary = css`  padding: 12px 24px;  border-radius: 8px;  background: linear-gradient(135deg, #3584e4, #1a5fb4);  color: white;`;const App = () => {  const [count, setCount] = useState(0);  return (    <ApplicationWindow title="Counter" onCloseRequest={quit}>      <Box orientation={Orientation.VERTICAL} spacing={12} margin={20}>        <Label.Root label={`Count: ${count}`} cssClasses={["title-1"]} />        <Button          label="Increment"          cssClasses={[primary]}          onClicked={() => setCount(c => c + 1)}        />      </Box>    </ApplicationWindow>  );};render(<App />, "org.example.Counter");

Native Desktop Apps

Build beautiful, native GTK4 applications that feel right at home on Linux