// React · Node · TypeScript · libadwaita · GTK4

The React framework for Linux

Build native apps with Adwaita and GTK widgets, TypeScript, and the Node.js ecosystem.

$npm create gtkx@2.0.0-beta.11

Try the beta View on GitHub

Prefer the stable release? Use GTKX 1.6 stable.

src/index.tsx

import {
  AdwApplication, AdwApplicationWindow,
  AdwHeaderBar, AdwToolbarView,
} from "@gtkx/jsx/adw";
import { GtkLabel } from "@gtkx/jsx/gtk";
import { createRoot, quit } from "@gtkx/react";

const App = () => (
  <AdwApplication>
    <AdwApplicationWindow
      title="My App"
      onCloseRequest={() => quit()}
    >
      <AdwToolbarView topBar={<AdwHeaderBar />}>
        <GtkLabel>Hello from GTKX</GtkLabel>
      </AdwToolbarView>
    </AdwApplicationWindow>
  </AdwApplication>
);

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

Native widgets in JSX

Build windows, dialogs, and adaptive layouts with Adwaita and GTK widgets. React updates them when your state changes.

Hot reload for desktop

Save a component to update the open window. Changes that need a restart relaunch the app automatically.

Types for your native libraries

Generate bindings from the libraries installed on your machine. Your editor checks widget props, signals, and native calls.

Test native apps

Find widgets by role and name, click buttons, and type into fields in Vitest. Tests run on a private headless display.

Inspect from your coding agent

Connect through MCP to inspect widgets, interact with your app, take screenshots, and look up the project's generated APIs.

Package your app

Build Flatpak, Debian, RPM, and AppImage packages. The CLI generates desktop entries and application metadata from your configuration.

From JSX to a native window

Choose your native libraries

Adwaita and GTK are included by default. Add libraries such as WebKitGTK to your configuration, then generate their bindings from the installed introspection files.

gtkx.config.ts

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

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

Describe the interface

Use JSX for widgets and the objects they depend on. Props configure them, and signal handlers connect user input to your application state.

src/app.tsx

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

Use Node.js and npm

Read files, make network requests, and use libraries such as Zustand and Zod. Your app runs on Node.js; packages that require a browser DOM need a native alternative.

Terminal

npm install zod zustand

Create, run, and package your app

bash

$ npm create gtkx@2.0.0-beta.11

Create a project with an application window, TypeScript, and test configuration.

Build a task manager

Build Tasks one feature at a time: lists, search, preferences, and reminders. Then test it, translate it, and create installable packages.

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. Help improve the framework, documentation, or examples.

Contribute Browse examples