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.

​
What is React GTK?

React GTK is a React renderer for building GTK+ desktop applications using JavaScript/GJS. It brings the power of React’s declarative UI paradigm to the GTK platform, allowing you to build native desktop applications using familiar React patterns.

Quick example

import { createRoot, GtkWindow, GtkButton } from 'react-gtk-renderer';

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

root.render(
  <GtkWindow title="Hello World">
    <GtkButton onClicked={() => console.log('Clicked!')}>Click me</GtkButton>
  </GtkWindow>
);

​
Why React GTK?

React GTK combines the best of both worlds: React’s component model and GTK’s native desktop capabilities.

Declarative UI

Write your GTK applications using JSX and React components. The renderer handles the imperative GTK API for you.

Native performance

Your apps run natively with GTK 4.0, providing excellent performance and native platform integration.

React ecosystem

Use React hooks, state management, and familiar patterns from the React ecosystem.

TypeScript support

Full TypeScript support with complete type definitions for all GTK widgets and APIs.

​
Key features

React GTK provides everything you need to build production-ready GTK desktop applications:
Built on top of React’s reconciler, React GTK efficiently updates the GTK widget tree based on your component changes. Only the widgets that need to update are modified, ensuring optimal performance.
All common GTK widgets are available as React components:
  • GtkWindow - Application windows
  • GtkBox - Layout containers
  • GtkButton - Interactive buttons
  • GtkLabel - Text labels
  • GtkEntry - Text input fields
  • GtkStack - Stackable page containers
  • And more…
Handle GTK signals using familiar React patterns:
<GtkButton onClicked={() => console.log('Clicked!')}>Click me</GtkButton>
Access GTK widget instances directly using refs:
const buttonRef = useRef<GtkButtonImpl>();
<GtkButton ref={buttonRef}>Click me</GtkButton>
Create complex applications with multiple windows and modal dialogs:
<>
  <GtkWindow title="Main Window">
    {/* Main content */}
  </GtkWindow>
  
  <GtkWindow modal title="Settings">
    {/* Settings dialog */}
  </GtkWindow>
</>
Apply rich text formatting to labels and entries using Pango attributes:
<GtkEntry
  attributes={[
    { start: 0, end: 5, type: 'foreground', value: 'red' },
    { start: 5, end: 11, type: 'weight', value: 'bold' }
  ]}
/>
Seamlessly integrates with the GJS runtime and GNOME platform, giving you access to the full GNOME stack.

​
How it works

React GTK uses a custom React reconciler to bridge React components to GTK widgets:
1

Write React components

You write standard React components using JSX and GTK component primitives.
2

React reconciler processes changes

React’s reconciler determines what changed in your component tree.
3

GTK widgets are updated

The React GTK renderer creates and updates actual GTK widgets based on the React component tree.
4

Native GTK rendering

GTK handles the native rendering, event processing, and platform integration.

​
Platform requirements

To use React GTK, you need:
  • GJS runtime - GNOME JavaScript bindings (GJS)
  • GTK 4.0 - The GTK toolkit version 4.0 or later
  • React 18.x - React version 18.0 or higher
  • Node.js - For building your application with bundlers like Parcel
React GTK targets the GNOME/GTK platform. Your applications will run on Linux systems with GTK 4.0 installed.

​
Next steps

Installation

Install React GTK and set up your development environment

Quickstart

Build your first React GTK application

Core concepts

Learn how React GTK renders components

API reference

Explore the complete API documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us