// React · Node · TypeScript · GNOME · Linux

The React framework for Linux

Write native Linux applications with React and TypeScript. Built on the GNOME stack and standard web tooling.

$npm create gtkx

Get started View on GitHub

src/index.tsx

import {
  GtkApplication, GtkApplicationWindow, GtkLabel,
} from "@gtkx/jsx/gtk";
import { createRoot } from "@gtkx/react";

const App = () => (
  <GtkApplication>
    <GtkApplicationWindow title="My App">
      <GtkLabel>Hello from GTKX 👋</GtkLabel>
    </GtkApplicationWindow>
  </GtkApplication>
);

createRoot().render(<App />);

Native objects

Every GObject-derived class is available as a JSX element. Properties are mapped to JSX elements, so you can compose your entire object graph declaratively.

Hot reload for desktop

Fast Refresh patches the running window as you save. Changes it cannot patch trigger an automatic, supervised restart.

Typed end to end

Every class, signal, enum and property is generated from GIRs and available to your IDE with full type information.

A React Testing Library for GTK4

Query and drive your app in Vitest, with a virtual display running on a headless Wayland compositor.

Agentic MCP server

A Model Context Protocol (MCP) server exposes your live app to AI agents, enabling testing, debugging and even autonomous development.

Powered by Rust

A native Rust core translates your GLib/GObject calls to the native architecture at runtime.

Written in JSX, rendered as GObjects

Declare your libraries

Name the GIRs you want and codegen reads them off your system, emitting typed bindings for exactly those namespaces.

gtkx.config.ts

import { defineConfig } from "@gtkx/config";

export default defineConfig({
  libraries: ["Gtk-4.0", "Adw-1", "WebKit-6.0"],
  applicationId: "com.example.myapp",
});

If it is a GObject, you can write it in JSX

Element types are GObject type names. Nested GObjects go in props, so a header bar or an adjustment is an element too, not an object you build on the side.

src/app.tsx

<AdwToolbarView topBar={<AdwHeaderBar />}>
  <GtkScale
    adjustment={<GtkAdjustment upper={100} />}
    drawValue
  />
</AdwToolbarView>

Vanilla Node, real npm

Your app is a plain Node program, so every npm package and Node API is available to it.

package.json

{
  "dependencies": {
    "@gtkx/react": "*",
    "react": "*",
    "zod": "*",
    "zustand": "*"
  }
}

One CLI for the whole lifecycle

bash

$ npm create gtkx
◇ Project structure created
◇ Dependencies installed
◇ Git repository initialized

A comprehensive tutorial

The docs walk you through creating Tasks, a complete GNOME app: adaptive split view, GSettings, notifications, and shipped as a Flatpak.

The Tasks app built in the tutorial: an adaptive Adwaita window with a sidebar of smart views and colored lists next to a boxed task list.

Follow the tutorial

Built in the open

GTKX is MPL-2.0-licensed and developed in public. We're open to contributions, and we welcome feedback and questions on GitHub.

Contribute on GitHub Browse examples