react-gtk

August 12, 2026 · View on GitHub

build native desktop applications with react and gtk4

react-gtk is a react renderer for GTK 4. It drives real GTK widgets through node-gtk (GObject Introspection bindings for Node.js), supports flexbox layout via Yoga, and styles widgets with CSS-like style props.

JOIN DISCORD

This project is under active development. Please help by sharing your experience, bugs, comments, complaints, etc . . .

If you think it, say it :laughing:

Usage

import React from 'react';
import Gtk from '@girs/node-gtk-4.0';
import { Box, Button, render } from '@react-gtk/core';

function App() {
  return (
    <Box orientation={Gtk.Orientation.VERTICAL}>
      <Button
        label="Click Me!"
        onClicked={() => {
          console.log('button was clicked');
        }}
      />
    </Box>
  );
}

render(<App />);

Dependencies

Ubuntu

sudo apt install libgtk-4-dev libgirepository1.0-dev gobject-introspection

macOS

brew install gtk4 gobject-introspection

Development

The repo is a pnpm workspace wrapped in make. The toolchain is pinned in .tool-versions (asdf).

make prepare    # one-time machine setup (asdf toolchain + pnpm install)
make build      # generate widget bindings and build the packages
make test       # run the unit tests
make typecheck  # typecheck every workspace package
make lint       # oxlint
make format     # oxfmt

The widget elements in @react-gtk/core are generated from your system's Gtk-4.0.gir by @react-gtk/generate (see packages/core/src/generated, which is gitignored). If your gir files live somewhere unusual, point the generator at them with the GIR_DIRECTORIES environment variable (path-delimiter separated).

Run the examples with a working GTK 4 installation:

make examples/todo/dev

note: running apps (as opposed to building the packages) requires the node-gtk native binding. pnpm skips dependency build scripts by default, so allow it with pnpm approve-builds if you need the runtime.

Packages

package	description
`@react-gtk/core`	the react renderer and generated widget elements
`@react-gtk/generate`	generates widget elements from gir files