Gsolid NPM | npm.io

GSolid

Simple and performant reactivity for building user interfaces, with GTK 4. GSolid is a universal GTK renderer for solid-js.

Performant: Working with native Gtk.Widget without heavy middleware. No Tick, No Late.
Powerful: Composable reactive primitives plus the flexibility of JSX.
Productive: Ergonomics and familiarity that make building simple or complex frontends a breeze.

GSolid supports Gjs.

import Gtk from "gi://Gtk?version=4.0";
import GLib from "gi://GLib";
import { createSignal, start, untrack } from "gsolid";
import { Box, Button, Label, ReactiveWindow } from "gsolid/gtk4";

Gtk.init();
const loop = GLib.MainLoop.new(null, false);

const dispose = start(() => {
    const [counter, setCounter] = createSignal(0);
    <ReactiveWindow
        open={true}
        onCloseRequest={() => {
            dispose();
            loop.quit();
            return true;
        }}
        title="Hello World!"
        defaultWidth={300}
        defaultHeight={250}
    >
        <Box orientation={Gtk.Orientation.VERTICAL} spacing={8}>
            <Label label={`Count: ${counter()}`} />
            <Button
                label="+1"
                valign={Gtk.Align.CENTER}
                halign={Gtk.Align.CENTER}
                onClicked={() => setCounter((x) => x + 1)}
            />
        </Box>
    </ReactiveWindow>;
});

loop.run();