# JavaScript One of the methods available to developers for creating instruments is to use a combination of HTML, JavaScript and CSS, as well as some *optional* XML. Together these files are placed in a location within a project (either as part of an aircraft, or as a unique package that can be used by multiple aircraft), and essentially they work together as follows: - The HTML provides the "framework" for the gauge - The JavaScript provides the logic - The CSS provides the styling - The (optional) [`panel.xml`](../../../content-configuration/modular-simobjects/aircraft/instruments/panel-xml-properties/) file provides additional functionality and is referenced from the JavaScript The "glue" that holds all this together is [Coherent GT](https://coherent-labs.com/Documentation/cpp-gt/index.html "Coherent GT"), which is the web engine being used by Microsoft Flight Simulator 2024 to display glasscockpits. This allows the simulation to bind its C++ data to the JavaScript used to make the gauges and instruments. Using Coherent means that you can call functions on the C++ side while also listening to events on the JavaScript side. Using Coherent also has the additional benefit that it enables you to move large amounts of data - like setting flightplans, or getting the nearest airports, etc... - which is something that just can't be done using SimVars. Also note that Coherent has a web interface that permits you to debug your instruments, which is explained on the following page: - [Coherent GT Debugger](../coherent-gt-debugger/) You can find tutorials for creating HTML/JS/CSS instruments on the following pages (and some very simple examples are given further down this page): - [Setting Up For HTML/JS/CSS Instruments](../js-gauge-tutorial/setting-up-for-html-js-css-instruments/) - [Creating An HTML/JS/CSS Instrument](../js-gauge-tutorial/creating-an-html-js-css-instrument/) - [Replacing An HTML/JS/CSS Instrument](../js-gauge-tutorial/replacing-an-html-js-css-instrument/) - [Debugging HTML/JS/CSS Instruments](../js-gauge-tutorial/debugging-html-js-css-instruments/) Finally, it is worth noting that these sections describe the underlying SDK API for creating gauges using JavaScript, however many aircraft - both custom ones and those that come with the simulation - use the **MSFS Avionics Framework**, which is a component based API specifically designed for making instrumentation using a React-like framework. You can find more information here: - [The MSFS Avionics Framework](../../../content-configuration/modular-simobjects/aircraft/instruments/instruments/#the-msfs-avionics-framework) ### Crossover API's Some of the Microsoft Flight Simulator 2024 API's permit communication between the different programming systems that people can use for their gauges and other features. These "crossover" API's are as follows: - [Flow API](../flow-api/) - [Communication API](../communication-api/) ### HTML Setup The most basic setup for your HTML file will look something like this: ``` xml ``` This links the CSS stylesheet to use, calls the relevant scripts, and also calls the JavaScript file you have created for the gauge. Now, there are some things to note here: - Your HTML will be inserted in the DOM so there is no need to create a regular HTML boilerplate with the usual ``, ``, and `` sections. - You can reference your CSS file as you would normally using a `` tag. - Your gauge HTML needs to be inside of a ` ``` We won't go into exactly what's going on here as the basis for the HTML is explained further up this page ([HTML Setup](#html-setup)), although it's worth emphasising that the **very last thing in the file** should be the `