Skip to content
Easily add GUI to Node.js programs.
JavaScript HTML XSLT Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
15-puzzle
Atlas
Blank
Chatroom
Hello
Notes
TodoMVC
.replit
CHANGELOG.md
LICENSE
README.md
main
package.json

README.md

Node.js version of the Atlas toolkit

For Node.js

Run on Repl.it Version 0.10.0 Starslicense: MIT Documentation

NPM badge of the Atlas toolkit

The Atlas toolkit is probably the fastest and easiest way to add a graphical user interface (GUI) to your Node.js programs.

With the Atlas toolkit, both front and back ends are handled by the same code, and the programs will also be reachable from all over the internet.

Only basic knowledge of web technologies are required. And, with the Atlas toolkit, you can easily add a GUI to programs originally designed to have a CLI, so the users of this programs can choose which interface they want to use.

If you want to use the Atlas toolkit without installing the examples, simply install the atlastk package from NPM (npm install atlastk). This package has only one internal dependency, with no other dependencies.

You can also use the Atlas toolkit on Repl.it, an online IDE, so you have nothing to install, as you will see in the next section.

Live demonstrations

Before diving into source code, you can take a look on some live demonstrations to see how applications based on the Atlas toolkit look like. You will find the 15-puzzle game, and also the Atlas toolkit version of the TodoMVC application, which looks like this:

TodoMVC

To see all this live demonstrations, simply go here, click on the green run button, select the demonstration you want to see, and then click (or scan with your smartphone) the then displayed QR code.

Hello, World!

Here's how a Hello, World! type program made with the Atlas toolkit looks like:

Little demonstration

  • git clone http://github.com/epeios-q37/atlas-node
  • cd atlas-node
  • npm install
  • node Hello/main.js

You can also put below source code in a file and launch it after having installed the atlastk package (npm install atlastk), or, with absolutely no installation, paste the below code here, and open the displayed URL in a web browser.

Source code:

const atlas = require( 'atlastk' );

const body = `
<div style="display: table; margin: 50px auto auto auto;">
 <fieldset>
  <input id="input" maxlength="20" placeholder="Enter a name here" type="text"
         data-xdh-onevent="Submit" value="World"/>
  <div style="display: flex; justify-content: space-around; margin: 5px auto auto auto;">
   <button data-xdh-onevent="Submit">Submit</button>
   <button data-xdh-onevent="Clear">Clear</button>
  </div>
 </fieldset>
</div>
`;

const callbacks = {
    "": (dom, id) => dom.setLayout("", body,
        () => dom.focus("input")),
    "Submit": (dom, id) => dom.getContent("input",
        (name) => dom.alert("Hello, " + name + "!",
            () => dom.focus("input"))),
    "Clear": (dom, id) => dom.confirm("Are you sure ?",
        (answer) => { if (answer) dom.setContent("input", ""); dom.focus("input"); })
};

atlas.launch(() => new atlas.DOM(), callbacks);

Content of the repository

The Atlas directory contains the JavaScript source code for Node.js of the Atlas toolkit, which is not needed to run the examples.

The node_modules directory (not provided by the repository, but will be created when launching npm install) contains the files that are needed in order to use the Atlas toolkit.

All other directories are examples.

To launch an example:

  • launch npm install (this have only to be do once),
  • launch node <Name>/main.js,

where <Name> is the name of the example (15-puzzle, Blank, Chatroom…). For example node Hello/main.js.

The Atlas toolkit is also available for:

For more information about the Atlas toolkit: http://atlastk.org/.

You can’t perform that action at this time.