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!

Happy fiddling!

You may also be interested in:

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


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

    • http://jquery4u.com/ jQuery4u

      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

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.