On Stack Overflow and our other code-related sites, creating a minimal, complete, and verifiable example is the best way to get an answer to your question. We’ve always loved JSFiddle and sites like it because they let both askers and answerers reference runnable, working code that demonstrates their problem or solution.
Unfortunately, the use of these external sites introduces a few problems:
- If the link breaks, the post becomes worthless.
- If the code isn’t embedded in the page, visitors are forced to go elsewhere to get the full content of the question or answer.
- Also, because the code isn’t a part of our post Markdown, changes to it don’t show up in the revision history.
The community voiced similar concerns around external sites, which eventually led us to block posts that contain links to JSFiddle and similar sites without a corresponding code block. This is an unnecessary burden for both askers and answerers.
So we’ve created our own way to embed runnable JavaScript, CSS, and HTML code blocks right in the body of a post. As of today, we’re launching “Stack Snippets,” a fully integrated feature available on Stack Overflow and any other code-related Stack Exchange sites.
How Do Stack Snippets Work?
With Stack Snippets, a code block:
Can become a runnable code block:
The code will not run until you press the “Run code snippet” button:
How Do I Make A Stack Snippet?
Stack Snippets work for both questions and answers. In the Markdown editor window, there’s a new button that you can click to launch the Stack Snippets editor.
The editor appears and allows you to enter HTML, CSS, and JavaScript (or any combination of them):
Once you’ve got your code working, press “Insert into Post” at the bottom and you’re done! You can test your snippet, or load it back into the Snippets editor from right in the Preview screen:
When answering a post containing a snippet, you can easily include a modified version of the original in your answer – just click the “Copy snippet to answer” button.
Under the Hood
A great feature of Stack Snippets is that they are inserted as regular Markdown code blocks:
This makes them instantly backwards-compatible with our normal revision history and diffs, and also any API clients including our own mobile apps.
The runnable snippets behavior is triggered by a few new HTML comments that are not rendered by Markdown. You can even edit the code right from the Markdown editor and the snippet will still be runnable.
Are Stack Snippets Safe?
Yes, as much as the web in general is safe. You are not in any more danger than you are when browsing any site with JavaScript enabled. With that said, the snippets are running client code in your browser, and you should always exercise caution when running code contributed by another user.
We isolate snippets from our sites to block access to your private Stack Exchange data:
- We use HTML5 sandboxed iframes in order to prevent many forms of malicious attack.
- We render the Snippets on an external domain (stacksnippets.net) in order to ensure that the same-origin policy is not in effect and to keep the snippets from accessing your logged-in session or cookies.
Like all other aspects of our site, Stack Snippets are ultimately governed by the community. Because users can still write code that creates annoying behaviors like infinite loops or pop-ups, we disable snippets on any post that is heavily downvoted (scoring less than -3 on Stack Overflow, -8 on Meta). If you see bad code that you think should be disabled, downvote the post. If you see code that is intended to be harmful (such as an attempt at phishing), you should flag it for moderator attention.
What About Other Languages?
Our initial release supports HTML, CSS, and JavaScript because questions on these topics use external code hosting sites the most frequently. These languages also run client-side in the user’s browser, making them self-contained and easy to support. Server-side languages are much more complicated and require significant infrastructure changes in order to properly implement. We don’t have any specific plans at this time to implement other languages, but it’s something we might consider in the future.
What About Sites Like JSFiddle?
You can still use sites like JSFiddle if you prefer them. JSFiddle and similar sites still have a bunch of features that we have not implemented yet. The normal rules for a link still apply: make sure you copy the relevant code into your question or answer so that it can be accessed if the external site is unavailable.
We decided to implement our own version instead of embedding a third-party site for the reasons mentioned earlier:
- There’s no need to copy-paste the code into the post. It’s all embedded in the post automatically, so revision history and diffs just work.
- There’s no need to visit another site to get your answer. The best experience is one where your question and answer(s) are complete and on the same page.
- Since we host it, we can guarantee performance and up-time. We have high standards when it comes to performance and up-time, and want to make sure that the ability to run a snippet is always available.
Give Stack Snippets A Try
We’re excited to see how the community uses Stack Snippets, and looking forward to your feedback:
- If you find bugs, or you’d like to give specific feedback on Stack Snippets, you can post on Meta Stack Exchange using the tag stack-snippets.
- If you just want to try it out, we’ve created a sandbox on Meta Stack Exchange.
- If you feel that a particular site should have Stack Snippets, post a feature-request on that site’s meta – if there’s support from the community there, we’ll enable them.
We’ve already started piloting it on Code Review and are seeing some neat results. Don’t hesitate to share interesting examples you come across – or create – here in the comments.
Have fun!
Subscribe via RSS
49 Comments
Cool
Very nice, on to other languages!
Oooh, this is network wide now? I was really looking forward to this for Programming Puzzles & Code Golf, because embedding test cases within the post itself sounds really great. I’m excited to see how this goes!
Looks great: I’ve been able to use them in a few answers already!
This put a huge smile on my face :D
nice work :) I always wondered when you guys implement your own pasting service.
1Very interesting.
What’s with the funky theme when following the link from the community bulletin board? When `?cb=1` is appended to the URL there’s a rather ugly looking, very simple theme applied to the wordpress page.
Wow! Now we don’t have to post links to JSfiddle and JSbin in our questions. Thanks!
Kudos on the implementation! Love to see SO keep making things easier and easier to do.
http://stackoverflow.com/a/25879656/507674
Already putting it to good use! Thanks for this :)
Just when you thought StackExchange couldn’t get any better! Whats next http://stackoverflow.com/questions/7816556/visual-studio-extend-ide-the-exception-assistant ?!
I wonder if this will result in pressure to “sendmetehcodez” in JS/CSS answers. I could easily see losing votes or getting downvoted because you haven’t provided working code in your answer. There’s already a strong pressure (good in most cases) to provide code in an answer. It will be interesting to see how the culture around answering changes as a result of the native ability to provide working code samples.
Is it possible to have headings above each code block such as “HTML”, “CSS”, “Javascript”?
Love it. But a tidy button to properly indent the code would make it even better.
Simply Awesome :)
It’s cool, but… does seem a bit bloaty to me.
What’s next, replacing dotnetfiddle too? StackIDE?
I believe this post forgets an other important point about external sites: *license*!
Code written in an answer/question on the SE netword is under CC with attribution required, while the code written in external services follows the licenses of those services (which may even change in the feature). People could read code that they cannot use due to the copyright or they may be able to copy & paste it without giving attribution to the original author etc.
Good job this will really help this things a lot and make asking questions easier.
Cooooool :)
Totally agreed with Tim VanFosson. He touched on a good point.
Community (specially new users) might be cruel sometimes when you don’t provide a working code example even if you write a right answer to their questions.
Let’s wait and see how this feature work on this side. Other than this, good job..
This is COOL.
It would be nice to have similar integration with ShareLaTeX or WriteLaTeX on TeX – LaTeX Stack Exchange (tex.stackexchange.com).
Time to edit all my posts in html/css/js tags! Great feature, thanks :-)
-1 not enough jQuery.
Joking aside, will there be an easy way to load in popular libraries like jQuery, Angular, D3, Raphael, etc etc?
And to load other files from the web such as less popular but preexisting plugins?
Al. From the earlier demo, just “ as you would normally.
Erm, the snippet got stripped out rather than escaped.
Let’s try this way:
<script src=”…/jquery.js”/>
It is so nice!
To kee all those fiddles on & listed is a pain. Thx alot for that nice feature.
IMO it would be good to improve the loading of external libs…
Cool! Very usefull! Well done!
It seems like a great Idea.
I kept clicking on “Run code snippet” only to learn these are screenshots. doh.
Great feature! It feels like this was a missing part of the puzzle. Kudos StackO.
I think the biggest plus about this is the fact that, now, IE8 users have an online code simulator they can use.
I can even do alerts!
Next step: External libraries like jQuery (+ plugins)
Next next step: Snippet support for other languages like Python and Ruby (like codepad.org)
Very clever and useful. Good work!
Sweet!
Given that there seem to be interpreters for many languages written in Javascript (cf e.g. http://repl.it/ ) is there an inherent reason to limit utility to webdevs?
Another concern is security: do you ever want to press that button without understanding the code first? Is the code executed in a sandbox?
This is great news! I hope it expands out to other languages some day too!
Nice feature! :)
Nifty!
Nice!
Now to discover if it’s possible to run a Ruby/Python/whatever interpreter in ASM.js and get other language support early. :D
Nice feature thanks :)
AWESOME! jsfiddle and SO together at last ❤︎
Very cool feature. I do love Jsfiddle but this is more convenient
Nice work. I can’t quite remember when ServerFault users were promised to get CloudShark integration – do you know this by any chance?
For JSFiddle specifically, on #3 (changes don’t show up in revision history):
If you make a change to a JSFiddle and save the changes, JSFiddle generates a new link to the revised fiddle (jsfiddle/Abc123 becomes jsfiddle/Abc123/1 then /Abc123/2, /Abc123/3 etc.) and forking the fiddle obviously generates a new link (/Abc123/4 becomes /456deF). Chaning the link in a SE post to point to the revised/forked version of the fiddle would be recorded in the history.
Responding to Tim VanFossen (http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/?cb=1#comment-96097): I’m not sure of the culture in all tags, but in Python (which sadly can’t benefit from this feature) there seems to be a general understanding of when you should be giving the person the fish, and when you should be teaching them. The line is not always clear, but when “gimmetehcodez” questions are answered with code, those answers get downvoted, or at the very least ignored. I’ve not seen a **good** teaching answer get downvoted in quite a while, that I can remember. Remember, sometimes a line or two of code may be enough to point the OP in the right direction, you don’t always need to spell it all out for them.
Nice work!
One thing, I often use one of my saved jsFiddles or plnkrs to start from – it saves a lot of time.
Do you think there’ll be any way to get access to your old runnable code blocks as a starting place on stackoverflow?
Got to try this one…