Custom jsFiddle for Stack Overflow

Question

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).

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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).

Answer 9

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.. |