As opposed to JSFiddle embeds
where the code is fully hosted on JSFiddle and embedded on a website,
jsfiddle-post.js (basd on our Post API) simply sends and
renders the code hosted on your website in JSFiddle.
-
Put
<script defer src="https://jsfiddle.net/js/jsfiddle-post.js"></script>somewhere on your website -
Add special attributes to your elements containing code:
<pre data-playground-type="html" data-playground-group="code-example-1"> <p>Hello world!</p> </pre>
<pre data-playground-type="scss" data-playground-group="code-example-1"> p { color: rgba(#ff0000, 0.5); } </pre>
-
Add the
Edit in JSFiddlebutton<a href="#" data-playground="jsfiddle" data-playground-from-group="code-example-1">Edit in JSFiddle</a>
Both attributes are required.
| Attribute | Possible values | Description |
|---|---|---|
data-playground-type |
css, scss, html, javascript, coffeescript, javascript1.7, babel, typescript |
Type of the code |
data-playground-group |
Unique group ID for a set code snippets |
Only the marked are required.
| Attribute | Possible values | Description |
|---|---|---|
data-playground |
jsfiddle |
(Required) Define playground. |
data-playground-from-group |
(Required) Unique group ID for a set code snippets. | |
data-playground-title |
Title of the fiddle. | |
data-playground-description |
Description of the fiddle. | |
data-playground-resources |
Comma separated list of resources to load along the fiddle. Full URLs. | |
data-playground-dtd |
html 5, html 4, ... |
Substring of a DTD. |
data-playground-wrap |
l, d, h, b |
Load type. onLoad, onDomReady, in <head>, in <body>. |
data-playground-normalize |
yes, no |
Should JSFiddle normalize your CSS. |
data-playground-framework |
Substring of a framework name. For example jquery will resolve into jQuery. |
|
data-playground-framework-version |
Substring of the framework version - the last passing will be used. If 1.3 will be given, JSFiddle will use the latest matching result, it'll favorize 1.3.2 over 1.3.1 and 1.3. | |
data-playground-dependencies |
Comma separated list of dependency substrings. For example ui will resolve into jQuery UI. Be sure to check what dependencies are available in JSFiddle first. |