Thanks to visit codestin.com
Credit goes to github.com

Skip to content
/ gtkx Public

Build native GTK4 desktop apps with React and TypeScript

License

Notifications You must be signed in to change notification settings

gtkx-org/gtkx

GTKX

GTKX

Build native GTK4 desktop applications with React and TypeScript.

npm version CI License GitHub Discussions


GTKX lets you write Linux desktop applications using React. Your components render as native GTK4 widgets through a Rust FFI bridge—no webviews, no Electron, just native performance with the developer experience you already know.

Quick Start

npx @gtkx/cli create my-app
cd my-app
npm run dev

Example

import {
  GtkApplicationWindow,
  GtkBox,
  GtkButton,
  GtkLabel,
  quit,
  render,
} 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={300}
      defaultHeight={200}
      onClose={quit}
    >
      <GtkBox
        orientation={Gtk.Orientation.VERTICAL}
        spacing={20}
        valign={Gtk.Align.CENTER}
      >
        <GtkLabel label={`Count: ${count}`} cssClasses={["title-1"]} />
        <GtkButton label="Increment" onClicked={() => setCount((c) => c + 1)} />
      </GtkBox>
    </GtkApplicationWindow>
  );
};

render(<App />, "com.example.counter");

Features

  • React 19 — Hooks, concurrent features, and the component model you know
  • Native GTK4 widgets — Real native controls, not web components in a webview
  • Adwaita support — Modern GNOME styling with Libadwaita components
  • Declarative animations — Framer Motion-like API using native Adwaita animations
  • Hot Module Replacement — Fast refresh during development
  • TypeScript first — Full type safety with auto-generated bindings
  • CSS-in-JS styling — Familiar styling patterns adapted for GTK
  • Testing utilities — Component testing similar to Testing Library

Examples

Explore complete applications in the examples/ directory:

  • gtk-demo — Full replica of the official GTK demo app
  • hello-world — Minimal application showing a counter
  • todo — Full-featured todo application with Adwaita styling and testing
  • x-showcase — Showcase of all x.* virtual components
  • browser — Simple browser using WebKitWebView
  • deploying — Example of packaging and distributing a GTKX app

Documentation

Visit https://gtkx.dev for the full documentation.

Contributing

Contributions are welcome! Please see the contributing guidelines and check out the good first issues.

Community

License

MPL-2.0

About

Build native GTK4 desktop apps with React and TypeScript

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 5