DEV Community


Getting your JSFiddle to work locally

Dev. I love dogs, cookies, and learning new things.
・2 min read

For work, I've been heavily using Highcharts to handle various data visualizations. Highcharts has an excellent page of demos, and each demo provides the option to edit in the code plagrounds JSFiddle or CodePen. The Highcharts support team is excellent and incredibly responsive, and they will provide examples and demos in JSFiddle. Likewise, when you're combing through the forum for ideas and answers from others, you'll see questions and answers in JSFiddle much more than you will see them in CodePen. When you reach out to Highcharts for help, the best way to ask your question is to include a JSFiddle, which they can examine and update with a solution.

Which means once your code is working in JSFiddle . . . you'll want to pull it into your git repo for production.

If you're like me, you're going to try and copy-paste directly into your html, JS, and CSS files because --- why not? And then, like me, you'll see it doesn't work and you'll end up sitting there like

It won't work because of the things JSFiddle is doing for you outside of the code in the panes. For example, in the "Basic Lines" demo, the HTML pane is missing the doctype, head, and body tags.

After a lot of googling and frustration (this is a question that has been asked pretty frequently actually), I found the following the easiest way to get access to the code I need so I could copy and paste. I figured - the thing is working, so I can't be missing that much, I just needed to find it.

Find the "results" pane:

Then right click and select view frame source. Not page source, but frame source. That will bring up a tab with all of the code making the frame run, which is exactly what you want.

As you scroll through it, you'll see some things that are specific to JSFiddle, but with this you can pull out the HTML, CSS, and JS as you need into your own files. This was mostly helpful after I got in a fight with a fiddle that had been set up using jQuery.

So that's it, nothing special or hard, but worth remembering after you've been working on a chart for a few hours, are going cross-eyed, and just want to be done. Woo.

Discussion (0)