124

So, I'm a JavaScript developer (mainly), and I've been using Stack Overflow for a bit now. I keep finding myself needing to use http://jsfiddle.net (or similar) in order provide demos in my answers. jsFiddle is great; however, I was wondering if Stack Overflow has any plans to create its own (slightly-more-permanent) code playground for its users?

jsFiddle seems incredibly simple to make, and more often than not the code I find posted in my answers is demo-ready (that is, it’s real code that doesn't contain placeholders). One way I can imagine implementing this is with a "run this" button which takes the code blocks from within a post, tries to execute them, and then opens the results in an overlay (or a new window).

12
  • 1
    What about non-JS code? Also, I think this has already been suggested in another post... May 13, 2010 at 2:08
  • It's a good point. But over time, I think we'll see services like jsFiddle for Flash (ActionScript), Silverlight (.NET languages), and possibly x86 code (code.google.com/p/nativeclient)?
    – Adam
    May 14, 2010 at 22:30
  • 1
    there is that service for Flash (wonderfl.net/about)
    – Corey
    Sep 9, 2010 at 16:55
  • 9
    Just came here to suggest this myself; you beat me to it by about 9 months. :] Jan 25, 2011 at 16:58
  • Since it is possible for these sites to succumb to linkrot, this should be implemented. Could only be for javascript at start, then could expand. This is not subject to linkrot because as long as the Exchange is up theoretically the fiddle is up (and vise versa). Also we can make it so these StackFiddles could be oneboxed in chat and many other goodies that we cannot do with other fiddle sites.
    – Naftali
    Dec 6, 2011 at 16:42
  • 5
    I just wanted to say that I have a deep desire to see super tight integration with jsFiddle and stackoverflow!
    – Gourneau
    Dec 10, 2011 at 4:56
  • 1
    You may want to check out [this nifty userscript[(meta.stackexchange.com/a/99598/178438). Once installed, you can run JS code in marked code blocks :) May 18, 2012 at 8:18
  • 1
    @MrLister ideone.com ?
    – Bart
    May 25, 2012 at 10:10
  • 3
    +1 Let's bring sqlfiddle along too! (Yes I realise it would have significantly more overhead) Jul 11, 2012 at 3:36
  • This is also licencing to consider as Stack Overflow is CC where JSFiddle is "All code belongs to the poster and no license is enforced." May 28, 2013 at 16:37
  • I have to agree with this completely! I have just posted an example of a working model of my jsFiddle jsfiddle.net/sixfootjames/LY5y5/35 where people can see the efforts I have put in, rather than just asking and expecting others to fix the problem. Now I have to copy all my code back to SO stackoverflow.com/questions/21574424/… which is very lengthy and not many people have the time to read through so much code. It would be far more useful if there were an soFiddle of sorts. Feb 5, 2014 at 10:24
  • Although this request was made with Stack Overflow in mind, it's applicable to any other site about code. The feature that was developed as a result of this post is used on at least ten other sites so why the close votes?
    – Laurel
    May 31, 2019 at 0:50

9 Answers 9

19

We've implemented something like this here:

Feedback requested: Runnable code snippets in questions and answers

We thought about just embedding JSFiddle, but we really wanted to make sure that all the code was natively contained in the post itself instead of reliant on a third party. Also there were some license concerns. We decided to just roll our own for now, since it was pretty straightforward to get it doing what we wanted.

3
  • Wow, this is amazing! Thanks. Sorry I didn’t accept this answer sooner. :) Can’t wait to see this in SO proper.
    – Adam
    Apr 19, 2015 at 21:57
  • @Adam It's live! Has been for months. Apr 20, 2015 at 1:26
  • Oh, awesome! In the question it says “Right now it's only turned on on Meta Stack Overflow.” which is what led me to believe it wasn’t in SO yet. How is this expected to be understood by someone reading this question or the linked “Feedback requested: Runnable code snippets in questions and answers” question page? Perhaps I’m just missing somethng.
    – Adam
    Apr 24, 2015 at 0:34
143

jsFiddle is my project. Is there anything what could be done to make jsFiddle work better with Stack Overflow?

21
  • 59
    You made it? Great website, btw. May 16, 2010 at 1:12
  • 4
    Yes, great site indeed. Hmm, not sure. The main reason I'm asking for this is because while I'm worried about jsF's longevity. I can think of one thing you guys could do though: under the share dropdown, provide a third string for posting to SO, perhaps: "**HTML**\n\n" + html + "\n\n**CSS**\n\n" + css + "\n\n**JS**\n\n" + js, where html, css, and js are the code strings with tabs prepended to each line (so that they become codeblocks in SO). As you can see, this is usually end up doing by hand: stackoverflow.com/questions/2807599/….
    – Adam
    May 16, 2010 at 15:51
  • 32
    JSFiddle is brilliant, thanks for providing this great service!
    – Pekka
    Oct 24, 2010 at 20:35
  • 4
    I would suggest including an API so that stackoverflow can access the fiddles and store them locally. This way, there is no inherent fear that the links will disappear, and render some answers useless in due time. On StackOverflow I just got reprimanded for including a fiddle for a simple solution without providing the code snippet in my answer. I see how fiddle links are beneficial in short term, but in the long run this could be an issue.
    – Sandwich
    Jan 2, 2011 at 7:46
  • 2
    I've started to write API - it's "unwriteable" - MooTools is using it for demos (doc.jsfiddle.net/api/post.html), but their use case is different. There is always an ability to create a fiddle and download the code from it (add /show_css/ to get CSS part of the fiddle). It's undocummented, but I think it wont change with the beta version ...
    – zalun
    Jan 10, 2011 at 10:38
  • 4
    go go go jsFiddle man!!! :-)
    – xanatos
    Sep 5, 2011 at 5:14
  • 7
    The main issue I have is speed during peak periods. The response time is just so lagy because everyone uses the thing. I know someone managed to contact you regarding donations but they were declined. I'd love to help you guys get more servers so we don't have to deal with the lag, and I'm sure the people who use your site would as well.
    – Incognito
    Dec 6, 2011 at 16:51
  • 7
    The other issue is auto-loading of fiddles that crash the browser or at least the tab. we should have a URL-hack like adding a /norun or something so we can look at the code.
    – Incognito
    Dec 6, 2011 at 16:52
  • @user147116 are you still here to answer questions?
    – Naftali
    Dec 12, 2011 at 18:13
  • 3
    @Incognito That already exists. just add /embedded to the end. Example: jsfiddle.net/maniator/K3wCM/embedded
    – Naftali
    Dec 12, 2011 at 18:15
  • 1
    peak time is inddeed problematic - I'm working mostly on beta, but I'm pretty close to add more servers to jsfiddle (it wasn't designed to be scalable...)
    – zalun
    Dec 20, 2011 at 8:56
  • I've just added the second server yesteday, this should get rid of the ugly 502. I need still to tweak mysql configuration.
    – zalun
    Jan 11, 2012 at 16:19
  • 2
    How has this not been baked into SO yet? I remember reading this months ago. It should be their #1 priority.
    – switz
    Mar 4, 2012 at 13:55
  • 2
    I really want jsFiddle integration with SO
    – Gourneau
    Mar 29, 2012 at 21:36
  • 1
    A fast and easy way to flag a license for the code, and a visible spot where the license is displayed. If you want to target the site for SO, put "Public domain/'free for all'" and "Creative Commons Attribution-ShareAlike" first in the list. Jun 20, 2012 at 16:47
15

Maybe SO could include stripped-down jsFiddle pages in iframes if it sees a link to jsFiddle posted, or host its own installation. In any event, this would be a great addition, because I find myself wanting to promote jsFiddle every time I see someone posting sample code.

9

I know this is an old thread, but I thought I would add an updated answer as I recently decided to implement a convention for embedding jsFiddles into Markdown posts (while remaining sanitized)

The convention I came up with was the following:

// render jsFiddle embed iframe with default options
$[http://jsfiddle.net/uzMPU/]

// render jsFiddle embed iframe with specific tabs
$[http://jsfiddle.net/uzMPU/][result,js,css]

In addition, following similar convention to links and images, referencing the link by id will also be valid:

// render jsFiddle embed iframe with default options
$[1]

// render jsFiddle embed iframe with specific tabs
$[1][result,js,css]

  [1]: http://jsfiddle.net/uzMPU/

This would result in the following iframes being rendered as the following:

<iframe src="http://jsfiddle.net/uzMPU/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<iframe src="http://jsfiddle.net/uzMPU/embedded/result,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

(In reality, I have modified this slightly, and included a style tag: width: 100%; height: 300px; by default)

In addition to the $[] syntax, I have made it a requirement that the $[] be entirely on it's own line. As a result, writing the following:

This is an inline $[http://jsfiddle.net/uzMPU] fiddle looking link

will not result in an iframe being rendered.

I implemented this with some additions to MarkdownSharp (which is what stack uses to process the markdown AFAIK) and blogged about it in my post Extending Markdown/MarkdownSharp for jsFiddle embedding

I am definitely in the camp that this would be very helpful and nice for js/html/css tagged questions... Although I also think that there would be issues having too many "links as answers" essentially.

3

I would like something like an embedded JSFiddle Frame that can be enabled for questions tagged with JavaScript. Basically, you shouldn't need to click on a link to go and see the wonders of JSFiddle, they should be presented on Stackoverflow itself.

1
  • 1
    I agree, my idea is instead of having code samples in your question, you supply your code in frames similar to jsfiddle. The code could render in your question the same, but there would be a "fiddle" button that would open up the StackFiddle in a new window with the code all ready to play with. then in stead of creating updates or forks and supplying links you could just answer the question with your fiddle.
    – ShemSeger
    Jul 18, 2014 at 17:55
2

Total integration of jsFiddle into Stack Overflow would be wonderful of course. I can't disagree with that.

However, maybe something simpler hosted directly in Stack Overflow pages would prove even more useful? Perhaps something conceptually similar to what you see in Eloquent JavaScript would work. For stand-alone JavaScript code, that's a ready-made solution. For more complex questions and answers that require CSS, HTML, other libraries, etc, a solution hosted directly within Stack Overflow is still preferable to integrating with a third-party project to host code upon which Stack Overflow questions and answers depend.

1

Security/abuse concerns

There are some important design aspects this possible fiddle system should follow: it should be certifiable and run optionally.

The first point meaning the Fiddle should be very clear about what it does: The code and the actual fiddle itself should be intertwined so the poster would not be able to fake what the possible outcome is before the fiddle actually runs.

Secondly, the fiddle should run only upon request of the user looking at the fiddle. This would, again, allow the user to first ascertain whether they actually want to run the code or no.

I don't think the reasoning as to why these two points are important needs further explaining, the possibilities for exploit are too numerous.

Possible functionality

The fiddle could feature generated previews of the final outcome as a comfort-of-use functionality. These previews could be generated server-side using the headless Webkit PhantomJS. Strict performance limitations, API call limits and sandboxing would obviously apply to reduce the risk of possible attack vectors.

A central problem of the design of the fiddle is the question whether it should complement the currently existing code tags or be a new, completely separate system altogether.

1

I realize this can be complicated to implement (and I'm more than willing to help with development :P) and that there are issues that needs addressing, but I think it's plausible, and that we will all deeply benefit from such a feature. I know I would. Here are some ways:

  • It's a bit cumbersome to have to visit an external page just for the sake of viewing the relevant demo. We don't want to leave the website. Ever.

  • It would act as a catalyst for finding solutions (by the OPs), or for the least will provide a further step towards a solution, as such a feature would drive those who hadn't even attempt to isolate the problems with their own code to give it a go — potentially identifying fundamental issues with it.

There are be several points to consider:

  • We probably wouldn't want to simply embed an editable version of the demo, just point to a live preview. Directly Allowing editing that demo inside the post would probably be a bad idea (the post changes content and loses meaning).

    To allow for editing, the embedded frame can provide a link at the bottom, e.g. Edit this demo. This link can create a fork (new demo for editing) in the demo service.

  • Syntax should be simple and straightforward. Perhaps prefixing a link-like markdown declaration with a special sign. Suggested syntax (I just picked @ to indicate a preview as it resembles an eye):

    @[alt-text][http://jsfiddle.net/mydemo/embedded]
    

    This kind of special declaration will also allow for restrictions to be enforced on such links, like those mentioned in the last point; for example, it must be on jsFiddle, and has to be in the form http://jsfiddle.net/[{user}/]{demoId}/embedded/. This will make sure the demo is a read-only (embedded mode on jsFiddle effectively prevents editing).

0

Embeded panel for live code and you can choose frames between JSFIDDLE, PLUNKR,JSBIN,CODEPEN and so on

So that you can include live code examples in questions/answers and both Stack and Services Providers will benefit of this.


| JSFIDDLE | JSBIN | CODEPEN | PLUNKR | ETC.. |

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .