Build Linux Apps, Fast

counter.tsx

import Adw from "gi://Adw?version=1";
import Gtk from "gi://Gtk?version=4.0";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <Adw.ToolbarView>
      <Adw.HeaderBar $type="top" />
      <Gtk.Label cssClasses={["title-1", "numeric"]} hexpand label={count.toString()} />
      <Gtk.Box $type="bottom" cssClasses={["toolbar"]}>
        <Gtk.Button onClicked={() => setCount(count - 1)} hexpand>
          -
        </Gtk.Button>
        <Gtk.Button onClicked={() => setCount(count + 1)} hexpand>
          +
        </Gtk.Button>
      </Gtk.Box>
    </Adw.ToolbarView>
  );
}

Unmatched Developer Experience

Component-Based UI

With React, break your interface into small, reusable pieces. Each component manages its own state and renders native Linux widgets. Compose them together to build entire applications.

counter.tsx

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <Gtk.Box>
      {count}
      <Gtk.Button onClicked={() => setCount(count + 1)}>Increment</Gtk.Button>
    </Gtk.Box>
  );
}

Styling

Enhance your application code with CSS modules.

app.tsx

app.tsx

import styles from './styles.module.css';

function App() {
  return (
    <Gtk.Box>
      <Gtk.Label cssClasses={[styles.heroText]}>Welcome to Peachy!</h1>
    </Gtk.Box>
  );
}

styles.module.css

styles.module.css

.hero-image {
  border-radius: 12px;
  border: 1px solid;
}

Automatic Resources

Import icons, illustrations, and other assets directly in your code and they will be bundled into your application.

counter.tsx

import Logo from "./logo.svg";

<Gtk.Picture paintable={Logo} />

Hooks

Common patterns for accessing data made easier.

app.tsx

import { useDarkMode, useAccentColor, useSetting } from "./logo.svg";

const [darkMode, setDarkMode] = useDarkMode();
const [accentColor, setAccentColor] = useAccentColor();
const [orientationLocked, setOrientationLocked] = useSetting("org.gnome.settings-daemon.peripherals.touchscreen", "orientation-lock");

Powered By

Technologies utilised by Peachy under the hood

GTK Multi-platform toolkit

GJS GNOME JavaScript bindings

React The library for web and native user interfaces

Rolldown Blazing Fast Rust-based bundler for JavaScript

girgen GIR Parser and type generator.