Skip to content
React renderer with X11 as a target
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply your React or React Native like experience to build small GUI programs to run in X Window environment (usually linux desktop, but I personally more often code under osx + XQuattz)

This library is mostly written in javascript all way down, no special bridging code in different language required. For communication with X server node-x11 library is used, which is pure JS implementation of X11 protocol (think of it as xlib rewritten in javascript/node.js)


Currently only window component is available, in the future we'll add windowless controls support, simple controls library and yoga-layout powered layout management

Trying it out

Clone this repo and from its folder run

npm install

After install is complete you can run examples by running one of those commands:

npm run examples:simple
npm run examples:simple-nojsx
npm run examples:xeyes


const React = require('react');
const ReactX11 = require('react-x11')
class App extends React.Component {

  handleRef (win) {
    // win is instance
    win.on('expose', ev => {
      ctx.fillStyle = 'black';
      ctx.fillText('Hello', ev.x, ev.y);

  render() {

    const paintRadialGradient = e => {
      const ctx = e.window.getContext('2d');
      const gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500);
      gradient.addColorStop(0, "green");
      gradient.addColorStop(0.5, "green");
      gradient.addColorStop(1, "rgb(255, 255, 255)");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, ctx.width, ctx.height);

    return (
      <window ref={this.handleRef} onMouseDown={ev => console.log('hello')}>
        <window onMouseMove={paintRadialGradient} />

You can’t perform that action at this time.