A quick look at using JSX in GNOME

This is a guest post by Lars Karlitski (larsu).

Thanks to a travel sponsorship from the GNOME foundation, I was able to attend the GTK+ hackfest in Toronto recently. The discussions and energy there inspired me to work on a prototype of something I had been thinking about for a while: using JSX to create GtkWidgets.

JSX is a JavaScript extensions that adds XML literals to the language. It can turn code like this:

var win = new Gtk.Window({
    title: "hi",
    default_width: 300,
    default_height: 150

var button = new Gtk.Button({
    label: "click me"

button.connect('clicked', function () {


win.connect('destroy', Gtk.mainQuit);

into this:

function buttonClicked() {

var win = <Gtk.Window title="Hello, World" defaultWidth="300" defaultHeight="150" onDestroy={Gtk.mainQuit}>
            <Gtk.Button label="click me" onClicked={buttonClicked} />


I find that in addition to being more concise, it also makes the hierarchy of widgets much easier to understand when reading code later on.

It’s only a proof of concept right now, building on Andrea Giammarchi‘s great but not-quite-ready node bindings to GObject introspection. My fork is available at:


If you want to try it out, clone the repository and build it with:

$ npm install

Then, compile the simple example from above from JSX to plain JavaScript and run it:

$ $(npm bin)/babel examples/hello-world.jsx -o examples/hello-world.js
$ node examples/hello-world.js

Please let me know if you’re interested in this and whether it’s worth spending more time on it.

Sponsored by the GNOME foundation

Sponsored by the GNOME foundation

5 thoughts on “A quick look at using JSX in GNOME”

  1. Hey hello!

    Really exciting! I’ve been toying with the exact same idea for a good while.
    I have a fork of NodeGtk that you can see here: https://github.com/romgrk/node-gtk

    I’ve been working a lot on supporting NodeJS 6.0, which has `class` syntax and more. I’ve also been trying to generate TypeScript definition files from the GObject-Introspection data.
    Here you can see a ProofOfConcept gist:
    (Its an approximate replication of DevHelp using WebKitViews, everything is in TypeScript)

  2. Awesome !

    As a React developer and former (small) contributor to some GTK based software, this is something that can give me the incentive to get back to GTK app dev :)

  3. By the way have you considered porting react-native to GTK/GNOME ? It seems that canonical started doing this, and it could lower the barrier of developing GTK apps a lot.

  4. Yes, please spend more time on this. It’d be a great basis for further work on something like react-native-gtk.

Comments are closed.