# JSFiddle Docs & Help
{% content-ref url="/pages/-L9jXjJ6H0NdJSzp-Uqo" %}
[Getting started](/getting-started)
{% endcontent-ref %}
{% content-ref url="/pages/-LNuoSRx521ek62mL\_wH" %}
[Panels settings](/panels-settings)
{% endcontent-ref %}
# Getting started
How to get started with JSFiddle.
## New fiddle or a Boilerplate
Opening an empty fiddle will give you the option to start fresh or create a fiddle from our boilerplates:
## Entering and running code
JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result.
* **HTML** - structure code, no need to add `body` `doctype` `head`, that's added automatically
* **CSS** - styles. You can switch pre-pocessor to SCSS
* **JavaScript** - behavior. There are many frameworks and code pre-processors you can use
Once you enter code, just hit **Run** in the top actions bar, and the fourth panel with results will appear.
## Saving and Forking code
* **Save** / **Update** will do what you think, it'll save a new fiddle or update an existing one (and add a version number to it)
* **Fork** will split out an existing fiddle into a new one, starting with version 0
## Setting fiddle as Base Version
{% hint style="info" %}
This action is available for **logged in users only**.
{% endhint %}
If you're working a fiddle and updating it, the version number will increase, sometimes if you're satisfied with the code you have it's good to save it so that the version numbers are hidden, and the version you've set as base is the default one.
For example if you have a fiddle `jsfiddle.net/oskar/aba321/23` setting as base will make the 23 version accessible at `jsfiddle.net/oskar/aba321`
{% hint style="info" %}
When you save a **new title or description** for the fiddle, saving it will not result in any change on your dashboard, **you need to set the fiddle as Base for the new title and description to appear**.
{% endhint %}
# Panels settings
Each panel has their own settings
## HTML panel
* **Language** – currently not available
* **Doctype** – documents doctype, ie. HTML5, XHTML, etc
* **Body tag** – usually done to change the styling as ``. Some frameworks (Dojo) are using it to style the widgets and load CSS
## CSS panel
* **Language** – change the pre-processor, right now only **CSS** and **SCSS**
* **Options** – additional options, like the ability to **Normalize CSS**
## JavaScript panel
* **Language** – Pre-processor, ie **CoffeeScript**, **TypeScript**, **Babel**, **Vue**, **React**, etc.
* **Frameworks & Extensions** – many commonly used JS frameworks (and their extensions)
* **Framework** `
