Getting Started

Contents

Here is a step-by-step instruction to start building your application with swing-ui GUI module. If you find issues with these instructions, please report it as soon as possible.

Requirements

  • Windows, Linux, or Mac
  • Node.js 18+, Bun 1.1+, or Deno 2.6+. Check version with command node -v, bun -v, and deno -v respectively.
  • Java 11+ JDK (Path to Java executable must be added to the system’s PATH environment variable). Check version with command java -version.
  • Processor: 1Ghz or more (It even runs on a Raspberry Pi Zero $5 computer, just way slower than desired).
  • RAM: 500MB or more
  • Your app has to be ESM (ECMAScript Module). swing-ui doesn’t support CommonJS.

NOTE: If java command is not found, make sure the path to Java executable is added to PATH environment variable. Optionally, you can specify a directory to your desired java executable with option --java-dir="JAVA_EXECUTABLE_DIRECTORY" or by setting JAVA_HOME environment variable. (for example, if you have multiple versions of java on your system and want to use a specific version).

Create a New Project

Choose your JavaScript runtime:

Creating a new project in Node.js

  1. Create a new directory and navigate to it in terminal
  2. Create an ESM module with command: npm init -y && npm pkg set type=module.
  3. Install swing-ui module command: npm install swing-ui
  4. Import this module in your code with import "swing-ui"; All GUI classes, functions, and enums become global.
  5. Run your project with node index.js.

Creating a new project in Bun

  1. Create a new directory and navigate to it in terminal
  2. Run command: bun init -y.
  3. To install swing-ui module run: bun add swing-ui
  4. Import this module in your code with import "swing-ui";  All GUI classes, functions, and enums become global.
  5. Run your project with bun index.ts or your main file name.

Creating a new project in Deno 2+

  1. Create a new directory and navigate to it in terminal
  2. Run command: deno init -y.
  3. Use the module in your code:
    • For only Deno compatibility you can just import this module in your code with import "npm:swing-ui";  All GUI classes, functions, and enums become global.
    • For Node.js and Bun compatibility:
      1. Add "nodeModulesDir": "auto" to deno.json file to enable Node-style node_modules folder.
      2. To install the swing-ui module run: deno add npm:swing-ui
      3. Import this module in your code with import "swing-ui";  All GUI classes, functions, and enums become global.
  4. Run your project with deno --allow-all main.ts or your main file name.

NOTE: This module should NOT be installed globally with -g flag. It should be installed locally for each project.

Check out different ways to start your application.

Super Easy to Code

Your code to create a window with a button without using our visual UI designer can look like this:

index.js
import "swing-ui";

globalThis.mainForm = new Window("My new desktop app").size(500, 350).closeOperation(Window.CloseOperation.Exit).show();
let button1 = new Button("Click Me").addTo(mainForm).position(15,15).onAction(function(e){alert("You did it!");});

… but here is a preferred pattern for larger projects:

index.js
import "swing-ui";
class MainForm extends Window
{
  constructor()
  {
    super();
    this.visible(true).size(500, 350).closeOperation(Window.CloseOperation.Exit);
    this.button1 = new Button("Click Me").addTo(this).position(15,15).onAction(function(e){this.text("You did it!");});
  }
}
globalThis.mainForm = new MainForm();

NOTE: Always keep a reference to every UI component object by assigning it to a variable or storing it in another object’s property. If all references to a component are lost, it becomes eligible for garbage collection and may be destroyed at an unpredictable time. When a component is added to a parent, the parent maintains an internal reference to it as a child. This ensures the component remains alive even if all other references are removed, until it is explicitly removed from the parent.

But you don’t have to code UI at all. With our visual GUI designer you can build your forms in minutes by dragging-and-dropping components.

Easy JavaScript API Reference

We have compiled for you an API Reference, so you could find all available methods and properties of this module.

Report Bugs

Please report any bugs you find in this module or API reference. All reports will be reviewed and addressed as needed.

Get Familiar with API
API Reference
Visual GUI Designer
Scroll to Top