nx.js

Metadata

Customizing the title, version, author & icon of your nx.js application

For distribution, you will likely want to customize the metadata for your application, as well as use a custom icon:

  • Metadata information can be specified by adding specific properties to the package.json file
  • The icon can be specified by adding an icon.jpg file to the root of your project
Screenshot

ID

The title ID of your application is used to uniquely identify your application. This is primarily relevant when utilizing the Save Data API via localStorage.

To set the title ID of your application, add the nacp.id property to your package.json file. It should contain a 16-character hexadecimal string which starts with 01 and ends with 0000:

package.json
{
  "nacp": {
    "id": "0123456789ab0000"
  }
}
Tip

The create-nxjs-app tool automatically generates a random title ID for you, so normally you will not need to create this property manually.

Title

To set the title of your application (as will be shown in the homebrew menu), add the nacp.title property in your package.json file:

package.json
{
  "name": "my-application",
  "nacp": {
    "title": "My Application"
  }
}
Tip

Setting nacp.title is preferred since it allows for spaces, uppercase characters, etc. If not defined, then the root-level name property will be used.

Version

To set the version of your application, add a version property to your package.json file:

package.json
{
  "version": "0.0.1"
}

Author

To set the author of your application, add an author property to your package.json file:

package.json
{
  "author": "Barney Rubble <b@rubble.com>"
}

Icon

To set the icon of your application, add an icon.jpg file to the root of your project:

icon.jpg
package.json
main.ts
Note

The icon should be a square image. It will be resized to 256x256 pixels. If this file is not present, then the default nx.js icon will be used.

Loading Image

If your application takes a while to initialize, then you may want to include a loading (also known as a "splash screen") image. This image will be rendered to the screen while your application is loading.

To use a loading image in your application, add a loading.jpg file to the root of the romfs directory:

package.json
loading.jpg
main.ts
Note

The loading image is expected to be a JPEG image with a width of 1280 pixels and a height of 720 pixels. If this file is not present, then nx.js will not render a loading screen.

On this page