Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/devhammed/react-gtk/llms.txt

Use this file to discover all available pages before exploring further.

Build GTK+ apps with React

React GTK brings the power of React’s declarative UI paradigm to the GTK+ platform. Write desktop applications using JSX and render them natively with GTK+ 4.0.

Quick start

Get up and running with React GTK in minutes

1

Install the package

Install react-gtk-renderer using your preferred package manager:
npm install react-gtk-renderer react
React GTK requires React 18.x or higher and the GJS/GNOME JavaScript runtime with GTK 4.0 bindings.
2

Create your first component

Create a simple React component that renders GTK widgets:
import { GtkWindow, GtkBox, GtkLabel, GtkButton, 
  GtkOrientation, GtkAlign } from 'react-gtk-renderer';

export function MyApp() {
  return (
    <GtkWindow defaultHeight={400} defaultWidth={600} title="My App">
      <GtkBox
        orientation={GtkOrientation.VERTICAL}
        spacing={12}
        valign={GtkAlign.CENTER}
        halign={GtkAlign.CENTER}
      >
        <GtkLabel label="Hello from React GTK!" />
        <GtkButton onClicked={() => console.log('Button clicked')}>
          Click me
        </GtkButton>
      </GtkBox>
    </GtkWindow>
  );
}
3

Render your application

Use createRoot to initialize your GTK application and render your React component:
import { createRoot } from 'react-gtk-renderer';
import { MyApp } from './components/app';

const root = createRoot({
  id: 'com.example.myapp'
});

root.render(<MyApp />);
Your application ID should follow reverse-DNS notation (e.g., com.example.appname).

Explore by topic

Learn the fundamentals and build powerful desktop applications

Core concepts

Understand how React GTK renders components and manages the GTK widget tree

GTK components

Explore all available GTK widgets as React components

Event handling

Learn how to handle user interactions and GTK signals in React

Working with refs

Access GTK widget instances directly using React refs

Ready to get started?

Follow our quickstart guide to create your first React GTK application in minutes.

View quickstart guide

Build docs developers (and LLMs) love