Build Desktop Applications

for Linux, Windows and Mac using HTML, CSS and Javascript

Download AppJS (v0.0.20) Read Documentation

Because it is simple and yet powerful. Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.

HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!

Learn more about HTML 5 »

CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.

Learn more about CSS 3 »

Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.

Read more at nodejs.org »

The below packages include everything needed to get started with AppJS, including Node.js, all dependencies, binaries, and a launcher ready to go out of the box. 1.) Extract to a folder. 2.) Double click on launch. 3.) Hello World.

AppJS 0.0.20 Distributables:

For Node.js users, AppJS can be also be installed via npm.

npm install appjs

AppJS requires 32bit Node on OS X. It works on 64bit OS X but Node must be 32bit. We're working on solving this, but it's a limitation of Chrome itself so it's a work in progress. Help us gain traction by starring this chromium issue.

// load appjs

var appjs = require('appjs');

// serve static files from a directory
appjs.serveFilesFrom(__dirname + '/content');

// handle requests from the browser
appjs.router.post('/', function(request, response, next){
  response.send('Hey! How are you ' + request.post('firstname'));
})

// create a window
var window = appjs.createWindow({
  width: 640,
  height: 460,
  alpha: false,
});

// prepare the window when first created
window.on('create', function(){
  console.log("Window Created");
  // window.frame controls the desktop window
  window.frame.show().center();
});

// the window is ready when the DOM is loaded
window.on('ready', function(){
  console.log("Window Ready");
  // directly interact with the DOM
  window.process = process;
  window.module = module;

  window.addEventListener('keydown', function(e){
    // show chrome devtools on f12 or commmand+option+j
    if (e.keyIdentifier === 'F12' || e.keyCode === 74 && e.metaKey && e.altKey) {
      window.frame.openDevTools();
    }
  });
});

// cleanup code when window is closed
window.on('close', function(){
  console.log("Window Closed");
});
<!doctype html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <form action="/" method="POST">
      <input name="firstname" type="text" placeholder="Firstname"/>
      <input name="lastname" type="text" placeholder="Lastname"/>
      <input type="submit"/>
    </form>
  </body>
</html>

AppJS is a work in progress and needs a lot of improvement. There are unimplemented stuff waiting for your help! You can find them at github issue tracker or read the code and find @TODO tags! You can also subscribe to the development mailing list where we talk about AppJS features.

There are two areas you can help. If you code in C++ try to implement features that are only supported in one platform or two. We need all three major platforms to work (Mac, Linux and Windows). If you are professional in Javascript and Node.js then you can help us by implementing JS wrappers for C++ APIs.

To start contributing, fork git repository from github, clone the forked repository and make your changes according to instructions below. Then send a pull request. We discuss changes you have made. After that you can see your changes merged in the main repository!