GTKX

⚛️

React Components

Use React hooks, state, and component patterns you already know. Write JSX that renders as native GTK4 widgets.

🛡️

Type-Safe

Full TypeScript support with auto-generated types from GTK4 introspection data. Catch errors at compile time.

🚀

Native Performance

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

🎨

CSS-in-JS Styling

Style GTK widgets with an Emotion-style API. Use template literals and compose styles easily.

🧪

Testing Library

Familiar testing APIs with screen, userEvent, and query functions. Test components like you test React web apps.

🔧

Full GTK4 Access

Access all GTK4 widgets, signals, and properties. Use GLib, GIO, Gdk, and other GNOME libraries.

Simple and Familiar

Write React components that render as native GTK4 widgets

import { render, ApplicationWindow, Button, quit } from "@gtkx/react";
import { css } from "@gtkx/css";
import { useState } from "react";

const buttonStyle = css`
  padding: 12px 24px;
  font-size: 18px;
  background: linear-gradient(135deg, #3584e4, #1a5fb4);
  color: white;
  border-radius: 8px;

  &:hover {
    background: linear-gradient(135deg, #1c71d8, #174e9c);
  }
`;

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <ApplicationWindow title="Counter" onCloseRequest={quit}>
      <Button
        css={buttonStyle}
        label={`Clicked ${count} times`}
        onClicked={() => setCount(c => c + 1)}
      />
    </ApplicationWindow>
  );
};

render(<App />, "org.example.Counter");

Native Desktop Apps

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