JavaScript
Article
By Sam Deering

Embed Interactive jsFiddle Snippets on your Web Page

By Sam Deering

I just found out that you could embed interactive jsfiddle snippets on your webpage (not sure how long its been available, but thought it was worth a mention!). This is how you might go about embedding interactive jsFiddle code snippets live on your web page.

Instructions

  1. Go to jsfiddle.net and create your snippet
  2. Navigate to Menu > Share > Embed Code (embeds in an iFrame).
  3. Copy the iFrame code into your webpage HTML

jsfiddle-embed

Demo

Here is the demo of a jsfiddle embed – the cool things is you can switch between js, css etc and run the code live on the page, just press the play button!

--ADVERTISEMENT--

Happy fiddling!

You may also be interested in:

  • jquerybyexample

    I am already using this feature on my blog from last couple of months..

  • Pingback: Embed Interactive jsFiddle Snippets on your Web Page » PHP Script Blog()

  • Anil Kumar

    How can I hide CSS tab which is not applied and also can set Result tab as the first tab?

    • Hi Anil, not sure it’s possible to hide specific tabs, what is the link to your page so i can have a look.
      Thanks,
      Sam

  • Michael Donte Cordero

    Hello, I am trying to embed this to a blank html file. For some reason, I keep getting this issue: “file or directory not found” with a said file image. Any ideas?

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.