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 and function 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";
  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.
  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";
    • For Node.js and Bun compatibility:
      1. Rename deno.json to package.json
      2. Add "nodeModulesDir": "always" to the new package.json file to enable Node-style node_modules folder.
      3. To install swing-ui module run: deno add swing-ui
      4. Import this module in your code with import "swing-ui";
  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.

NOTE: In Windows it’s recommended to use an application like Bat To Exe Converter that creates a launcher executable (such as Run.exe) that would start the application without a terminal window. 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. Also, a free small command tool nircmd.exe can be used to start the node/bun/deno application without showing a terminal window. See our documentation for more ways to start your project without a terminal window.

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!");});

… this is a preferred method 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.

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
Videos
Scroll to Top