swing-ui is an awesome graphical user interface module for JavaScript that works on Windows, Linux and macOS. All you need is a JavaScript runtime (Node.js, Bun or Deno v2+) and Java 11+ JDK on your system to start creating 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

Why choose swing-ui GUI module?

• Write JavaScript code, get a Java Swing desktop GUI application
• With our visual GUI designer coding UI is no longer needed
• No async/await/Promise mess – synchronous calls to GUI makes coding intuitive
• Runs everywhere – Windows, Linux, macOS
• Runs in popular JavaScript Runtimes – Node.js, Bun, Deno v2+
• Enhanced Java Swing UI library at your fingertips
• Supports drag-n-drop, clipboard, undo/redo & more
• Fast and responsive experience
• Method chaining lets you write less while saying more
• No web browser – no HTML, no CSS mess.

Use our Visual GUI Designer for rapid design

• Intuitive controls
• Cross-platform – run on Windows/Linux/macOS
• Fast drag-and-drop design
• Familiar enough for low learning curve
• Intuitive component tree
• Convenient features (snapping/undo/redo/copy/paste/etc.)
• UI is stored in JSON format

Simple yet powerful design

• Unique design to make it all click together, patent-pending
• High performance architecture optimized for each runtime and OS under the hood
• Write simple JavaScript code, build GUI desktop apps powered by Java Swing UI
• No need to learn Java to build cross-platform desktop apps
• Simply install swing-ui module from npm and import it in your project

Demo Apps

Here are some of applications built with swing-ui, written purely in JavaScript:

Code 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 to be simple, intuitive, and easy to use without compromising functionality, so you can start building applications right away. Just import the swing-ui module and start creating UI components.

A key feature of swing-ui is its fluent interface, which uses method chaining to configure UI components (similar to jQuery). While method chaining can produce longer individual lines, it significantly reduces overall code verbosity compared to traditional property assignment patterns.

For example, setting multiple component properties can be done in a single line:

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