Writing Your First NodeGui App

NodeGui enables you to create desktop applications with pure JavaScript. You could see it as a lightly modified variant of the Node.js runtime that is focused on desktop applications instead of web servers.

NodeGui is also an efficient JavaScript binding to a cross platform graphical user interface (GUI) library Qt. Qt is one of the most mature and efficient library for building desktop applications. This enabled NodeGui to be extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. A hello world app built with NodeGui runs on less than 20Mb of memory.

Hello World

Clone and run the code in this tutorial by using the nodegui/nodegui-starter repository.

Note: Running this requires Git and npm.

# Clone the repository
$ git clone https://github.com/nodegui/nodegui-starter
# Go into the repository
$ cd nodegui-starter
# Install dependencies
$ npm install
# Run the app
$ npm start

As far as development is concerned, an NodeGui application is essentially a Node.js application. The starting point is a package.json that is identical to that of a Node.js module. A most basic NodeGui app would have the following folder structure:

your-app/
├── package.json
├── index.js

NodeGui Development in a Nutshell

NodeGui apps are developed in JavaScript using the same principles and methods found in Node.js development. All APIs and features found in NodeGui are accessible through the @nodegui/nodegui module, which can be required like any other Node.js module:

require("@nodegui/nodegui");

The @nodegui/nodegui module exports features in namespaces. As examples, windows can be created using the QMainWindow class. A simple main.js file might open a window:

const {
  QMainWindow,
  QWidget,
  QLabel,
  FlexLayout
} = require("@nodegui/nodegui");

const win = new QMainWindow();
//-------------------------------
const centralWidget = new QWidget();
centralWidget.setObjectName("myroot");
const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);
//--------------------------------------
const label = new QLabel();
label.setObjectName("mylabel");
label.setText("Hello World");
//--------------------------------------
rootLayout.addWidget(label);
win.setCentralWidget(centralWidget);
win.setStyleSheet(
  `
    #myroot {
      background-color: #009688;
    }
    #mylabel {
      font-size: 16px;
      font-weight: bold;
    }
  `
);
win.show();

global.win = win; // To prevent win from being garbage collected.

The index.js should create windows and handle all the system events your application might encounter.

Running Your App

You can try your app by running npm start from your application's directory.

Trying this Example