React renderer with X11 as a target
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples set overrideRedirect for child windows Apr 5, 2017
package-lock.json Add scripts to run examples Jun 2, 2017


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} />