swing-ui is an awesome graphical user interface module for Node.js that works on Windows, Linux and Mac. All you need is Node.js, Bun or Deno 2 and Java 11+ (JRE or JDK) on your system to be able to create beautiful interactive window forms, buttons, text editor, lists, tables, progress bars, split panels, menu, submenu, context menu, tray icon, toolbar, file chooser, color picker, dialog windows, check box, radio box, sliders and much more.

This module takes Jeff Atwood‘s famous remark about JavaScript to the next level:

“Any application that can be written in JavaScript, will eventually be written in JavaScript”
– Jeff Atwood

You can track version updates of swing-ui module at https://www.npmjs.com/package/swing-ui where I publish new releases.

I will be publishing video tutorials on my YouTube Channel how to use this GUI module to create beautiful desktop applications and all of its components, so see you there.

Demo Application

Here is a small example of such application written purely in JavaScript. I made it to stay organized with all data that I need to remember and work with.

Demo

Here is a simple demonstration of syntax used to build a desktop application using swing-ui module without using our visual UI designer:

import "swing-ui"; // import "npm:swing-ui"; for Deno-only compatibility

class AwesomeApp extends Window
{
	constructor()
	{
		super();
		this.text("New JavaScript GUI Application").closeOperation(Window.CloseOperation.Exit).size(600, 400).position(200, 200).show();
		this.textfield1 = new TextArea().size(555, 60).position(15, 15).addTo(this).text("Hello World\r\nThis is a DEMO application.");
		this.button1 = new Button("Clear Text").position(15, 90).addTo(this).onAction(function(e){MyApp.textfield1.text("You pressed button: " + this.text());});
		this.button2 = new Button().text("Close").position(125, 90).addTo(this).onAction(e=>{this.close();});
	}
};

globalThis.MyApp = new AwesomeApp();

import "swing-ui"; // import "npm:swing-ui"; for Deno-only compatibility

class AwesomeApp extends Window
{
	constructor()
	{
		super();
		this.text("New JavaScript GUI Application").closeOperation(Window.CloseOperation.Exit).size(600, 400).position(200, 200).show();
		this.textfield1 = new TextArea().size(555, 60).position(15, 15).addTo(this).text("Hello World\r\nThis is a DEMO application.");
		this.button1 = new Button("Clear Text").position(15, 90).addTo(this).onAction(function(e){MyApp.textfield1.text("You pressed button: " + this.text());});
		this.button2 = new Button().text("Close").position(125, 90).addTo(this).onAction(e=>{this.close();});
	}
};

globalThis.MyApp = new AwesomeApp();

This example generates the following application with functional buttons.

Coding Style

The API is designed with simplicity and usability in mind, allowing both beginners and experienced developers to work efficiently by following the documentation. A key feature of swing-ui is its fluent interface, which leverages method chaining to configure UI components.

While method chaining can result in longer individual lines, it significantly reduces overall code verbosity compared to traditional property assignment patterns.

For example:

// this
statusText.text("Done").size(100, 20).position(10, 120); 

// instead of this
statusText.text = "Done";
statusText.size = {width: 100, height: 20};
statusText.position = {left: 10, top: 120};

// this
statusText.text("Done").size(100, 20).position(10, 120); 

// instead of this
statusText.text = "Done";
statusText.size = {width: 100, height: 20};
statusText.position = {left: 10, top: 120};

Get Started

Check out the installation page to see step by step how to start building your first application in few minutes, or even seconds.