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

This action is available for logged in users only.

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

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.