My First App

My First App

From BeamNG

Revision as of 23:33, 24 June 2014 by Metalmuncher (talk | contribs) (Created page with "{{TOC_Right}} = My First App = The general idea is that this page will be a basic introduction to getting a basic app up and running. This will not be a from scratch tutoria...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

My First App

The general idea is that this page will be a basic introduction to getting a basic app up and running. This will not be a from scratch tutorial - at least some knowledge of HTML and JavaScript will be needed, or if you have experience in some JS-like language you should be able to pick up what is happening just fine. If you do not have a basic understanding of HTML and JavaScript, there are some excellent resources on the WWW that can help you out.


  • BeamNG's UI system makes extensive use of the jQuery, jQuery UI and jQuery Mobile JavaScript libraries, if you know these, or at least have the documentation open when building apps, this can save you a lot of time working out how to complete certain tasks.
  • Running BeamNG with the -cefdev argument will give you a window similar to Chrome's dev tools panel, enabling you to play around with the html/css and view console messages from the ingame HTML framework, and will enable a "ReloadUI" button when ingame so you dont have to reload the game to reload the UI and apps.

Required Files

At a minimum, an app requires 2 files and one folder.


To create an app from scratch, you need to have the following files under [BeamNG Root Directory]/html/apps/:


For the rest of this tutorial, the app name will be "MyFirstApp," therefore, the folder under apps in this case would be called "MyFirstApp."


Full article on app.json

The app.json file describes general information about the app, and what it requires from the game and how it should be displayed. See the full article for more detailed information on what can be described in this file. The example file below will get you started with a basic app that will appear in the appstore and have an initial size of 500x200px;


    "info": {
        "name" : "MyFirstApp",
        "author": "AuthorNameHere",
        "version": "0.1",
        "description": "This will be displayed in the appstore."

    "appearance": {
        "background" : "opaque",
        "size" : {
            "initial" : [500,200]

    "data": {
        "streams" : []


Full article on app.js

The app.js file is the main JavaScript source code for the app. There are two required parts of the file that are 100% required: the first line which names the class of the app and the initialize function which is called on app load. The names must match the name of the app's folder. In this example, an HTML heading element is created with contents "Hello World!" ($("<h1>Hello World!</h1>")) and appended to the root element of the app (.appendTo(this.rootElement)). If this syntax doesn't seem familiar to you, reading the jQuery library documentation may useful.


function MyFirstApp() {}

MyFirstApp.prototype.initialize = function () {
    $("<h1>Hello World!</h1>").appendTo(this.rootElement);


The described MyFirstApp ingame.

After saving those files you are now ready to test in game. If you are already ingame and have the -cefdev argument on you can just click the ReloadUI button, otherwise restart the game. When opening the appstore you should see your app in there, and after clicking on it it should display "Hello World!" in large text. Congratulations!