swing-ui GUI module

This is an awesome graphical user interface for Node.js JavaScript that works on Windows, Linux and Mac. All you need is JavaScript runtime (Node.js 18+, Bun, or Deno 2+) and Java 11+ JDK on your system to can 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 and much more.

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.

This module takes Jeff Atwood's famous remark about JavaScript so much closer to reality:

"Any application that can be written in JavaScript, will eventually be written in JavaScript." - Jeff Atwood

Demo Application written in pure JavaScript using this module

Demo

Some Highlights

  • No browser is involved, which means no HTML & CSS, no electron, no HTTP request/response handling, no need of React or other JS GUI frameworks. For the first time JavaScript has its own cross-platform easy to use GUI without web browser.
  • All components of Java Swing library available to you via this JavaScript API.
  • Even advanced features of Java Swing library are easy to use with this module, such as clipboard management including data types (mime types), dragging and dropping within the app and to/from external applications, setting data types being dragged/dropped, advanced table rows manipulations, such as sorting, filtering, cell data types (text, html, check box, combo box, icon, buttons), column sorting and column hiding.
  • Full control over menu/submenu item icons, support of JPG/JPEG/GIF/BPM/PNG images for icons, awesome UI component event handling, such as action event, mouse events, scrolling, moving, resizing, drag/drop, and many other events.
  • Support to use system GUI look and feel instead of default Java Swing GUI.
  • This is a JavaScript module that uses Java Swing components to deliver Java like user experience without writing a single line of Java code.

Requirements

  • Windows, Linux or Mac
  • Node.js 18+
  • Java 11+ JDK
  • Processor: 1Ghz or more (It even runs on Raspberry Pi Zero $5 computer, just way slower than desired).
  • RAM: 500MB or more

Getting Started

Here are simple steps to get started:

! IMPORTANT ! This module may NOT be installed globally by npm. It should be installed locally within each project where it is used. Global installation will not work.

  1. To create a new project create a new directory for it, navigate to it with terminal, then run: npm init for Node.js (Bun and Deno 2 will be supported soon).
  2. Install this module to your project: npm install swing-ui
  3. Run the script in swing-ui module (pick one for your system and JS runtime): "project-path/node_modules/swing-ui/run.win.node.bat"

Or you can run:

  • On Windows: project-path/node_modules/swing-ui/run.win.node.bat
  • On Linux: project-path/node_modules/swing-ui/run.linux.node.sh (just make sure that the .sh file is executable before trying to execute the script)

NOTE: If java command is not found, make sure the path of Java executable is added to PATH environment variable. You can also use full path to java executable (for example if you have multiple versions of java on your system and want to use a specific version).

NOTE: In Windows it's recommended to use application launch4j that creates a launcher executable (such as Run.exe) that would run the java command for you. The executable can have a custom icon, custom command arguments, and is nice for deploying projects, especially for commercial applications when you would want to create a shortcut with the icon to the executable.

Amazingly easy to code

Your code to create a window and a button in it can look like this:

import "swing-ui";

let mainForm = new Window("My new desktop app").size(500, 350).closeOperation(Window.CloseOperation.Exit).show();
let button1 = new Button("Click Me").addTo(mainForm).location(15,15).onAction(function(e){this.text("Do It Again");});

... or ..

import "swing-ui";

globalThis.mainForm =  = new class extends Window
{
  constructor()
  {
    this.visible(true).size(500, 350).closeOperation(Window.CloseOperation.Exit);
    this.button1 = new Button("Click Me").addTo(this).location(15,15).onAction(function(e){this.text("Do It Again");});
  }
}