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
  • HTML panel
  • CSS panel
  • JavaScript panel

Panels settings

Each panel has their own settings

PreviousGetting startedNextEditor settings

Last updated 6 years ago

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

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 <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>