> For the complete documentation index, see [llms.txt](https://docs.jsfiddle.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jsfiddle.net/panels-settings.md).

# 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="/files/-LNuruKlxbsTTHl0tXfu" 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="/files/-LNus7bM0uXASSNp-j_G" 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="/files/-LNusCG760910icV9BQS" alt=""></div>
