Understanding Deskframe

You can think of DeskFrame as a minimal browser that we use to load a local copy of a web application.

A single configuration file package.json included with your applications files is required to tell DeskFrame how to load your web application.

DeskFrame comes with a companion application to help you pack and distribute your web application as a single file.

For the most parts a javascript application will run just like in your browser. You can use different strategies to design your app to run with DeskFrame. In some case you may only distribute minimal bootloader code that loads remote content, a mix or local and remote content or compleatly local content.

DeskFrame is currently undergoing major changes. Packing applications in zip files is broken. API is partially documented.

App files

Like in any web app, you start with a folder that contains all of your files.

There is not particular requirement to name or organize your files. Later we will create a package.json where we indicate which one is our initial file to load.

Links and references to files should use relative paths. You may use absolute paths with "HTTP/S" for resources online as needed, if you do remember your application will require an internet connection to run.

You need to have your main html file in the top level of the folder. For example our "index.html" file.

The next step is to create a package.json file that tells Deskframe about the contents of your web app.


A package.json is the only file needed by DeskFrame to run a web application. This file provides information about your web application.

Create a file named package.json with your config options. To run you app you only need two properties.

	"name" : "My Application",
	"start_url" : "index.html",

Set the start_url property with an url or path to a file that will be loaded. You can specify an absolute path using a file:/// url, else the path is relative to the location of your package.json file.

Name your application using name.

Place your package.json file in the same folder where your web app files are located.

Additional options

The package.json file in Deskframe is similar to a web app manifest as defined in the progressive web apps (PWAs) standards with some additions.

	"name" : "My Application",
	"short_name": "MYAPP",
	"company" : "Classicteck",
	"uid" : "TESTAPP1205",
	"version" : "1.0",
	"start_url" : "index.html",
	"window" : {
		"title" : "Test Application",
		"width" : 800,
		"height" : 600

Setup your default window with a window object. Set the title, width, height.

NOTE: In your Mac you can enable the Inspector by typying the following command in the Terminal: defaults write com.expw.deskframe WebKitDeveloperExtras TRUE

Using deskframe.js

To really unleash Deskframe you need to use the functionality provided by deskframe.js. When you include deskframe.js you add a handfull of methods that allow you to interact with Deskframe and your host desktop.

The latest version of deskframe.js is Version 1.0 and you can download it from here.

Fork me on GitHub