JSFiddle Docs
  • JSFiddle Docs & Help
  • Getting started
  • Panels settings
  • Editor settings
  • Fiddle meta
  • External resources
  • Embedding fiddles
  • Async requests
  • Github Integration
    • Display fiddle from a Github repository
    • Display fiddle from Gist
    • Pass response directly from a Github repo
    • Pass response directly from Gist
  • API
    • Displaying user fiddles
    • Display a fiddle from POST
    • Get username
  • Use cases
    • Demos for products or libraries
    • Bug reporting (test-case) for Github Issues
    • Answers on Stack Overflow
    • Live code collaboration
    • Conducting live interviews for developer positions
    • Code snippets hosting
Powered by GitBook
On this page
  • New fiddle or a Boilerplate
  • Entering and running code
  • Saving and Forking code
  • Setting fiddle as Base Version

Getting started

How to get started with JSFiddle.

PreviousJSFiddle Docs & HelpNextPanels settings

Last updated 6 years ago

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.