PanelNinja provides a framework for creating and sharing custom panels and instruments.


If you are interested in building your own panel and instruments definitions for sharing, it is worth understanding how panels and instruments are built. This article provides a high-level overview of how panels and instruments are packaged with more details on creating your own in these two articles:

How Custom Panels and Instruments are Packaged

Custom panels and instruments are packaged and distributed in ZIP files containing multiple assets/files such as:

  • Configuration files in JSON
  • Logic files in JavaScript
  • HTML and CSS files for HTML-based instruments
  • Image files as SVG or PNG files

You can see examples of how you can build your own panels or instruments by saving a copy of the default panels and instruments provided in PanelNinja. You can do this on the Manage Instruments screen by choosing Save for any panel or instrument:


For instance, the Default Panel which comes with PanelNinja is contained in a ZIP file with the following files:

  • config.json: defines the configuration of the panel
  • default.png: provides the thumbnail for the panel used in the Manage Instruments screen 

Instruments are generally more complex, such as the default Heading instruments that comes with PanelNinja and contains the following files:

  • config.json: defines the configuration of the instrument
  • heading.svg: provides the thumbnail for the panel used in the Manage Instruments screen
  • heading_background.svg: provides the background layer of the instrument itself
  • heading_dial.svg: provides the dial layer of the instrument which rotates to reflect the heading
  • heading_foreground.svg: provides the foreground layer of the instrument itself
  • formula.js: provides the logic to apply to rotate the dial whenever a new heading is received from Infinite Flight

What Skills Do I Need to Create Custom Panels and Instruments

Details of how to create panels and instruments can be found in these articles: