# Panels settings

## HTML panel

* **Language** – currently not available
* **Doctype** – documents doctype, ie. HTML5, XHTML, etc
* **Body tag** – usually done to change the styling as `<body class="dark_ui">`. Some frameworks (Dojo) are using it to style the widgets and load CSS

<div align="left"><img src="https://2867931111-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jXGYtvV0gDWqyZIc-%2F-LNucb1zcqduazWl7IwO%2F-LNuruKlxbsTTHl0tXfu%2FScreen%20Shot%202018-10-03%20at%2018.59.49.png?alt=media&#x26;token=8589c0e9-ae8f-4c80-aef6-b8c4f70aea15" alt=""></div>

## CSS panel

* **Language** – change the pre-processor, right now only **CSS** and **SCSS**
* **Options** – additional options, like the ability to **Normalize CSS**

<div align="left"><img src="https://2867931111-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jXGYtvV0gDWqyZIc-%2F-LNucb1zcqduazWl7IwO%2F-LNus7bM0uXASSNp-j_G%2FScreen%20Shot%202018-10-03%20at%2019.00.02.png?alt=media&#x26;token=83bb2c94-6640-486c-b313-651788927f31" alt=""></div>

## JavaScript panel

* **Language** – Pre-processor, ie **CoffeeScript**, **TypeScript**, **Babel**, **Vue**, **React**, etc.
* **Frameworks & Extensions** – many commonly used JS frameworks (and their extensions)
* **Framework** `<script>` **attribute** – attribute added to the included framework script tag, ie `<script src="..." data-angular-custom-thingy>`
* **Load type** – the way JS is loaded in the editor – see table below for details:

| Load type                       | Description                                                          |
| ------------------------------- | -------------------------------------------------------------------- |
| **On Load**                     | wrap the code so it will run in *onLoad* window event                |
| **On DOM Ready**                | wrap the code so it will run in *onDomReady* window event            |
| **No wrap - bottom of \<head>** | *do not wrap* the JavaScript code, place it in the bottom of \<head> |
| **No wrap - bottom of \<body>** | *do not wrap* the JavaScript code, place it in the bottom of \<body> |

<div align="left"><img src="https://2867931111-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jXGYtvV0gDWqyZIc-%2F-LNucb1zcqduazWl7IwO%2F-LNusCG760910icV9BQS%2FScreen%20Shot%202018-10-03%20at%2019.00.12.png?alt=media&#x26;token=09f357b5-641f-4cbb-8d74-ee4631ba2f59" alt=""></div>
