site title

Introducing Runnable JavaScript, CSS, and HTML Code Snippets

09-16-14 by . 63 comments

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:

  1. If the link breaks, the post becomes worthless.
  2. 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.
  3. 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:

Code block

Can become a runnable code block:

Runnable code block

The code will not run until you press the “Run code snippet button:

Runnable code block that has been executed

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 Markdown toolbar with the new Stack Snippet button

The editor appears and allows you to enter HTML, CSS, and JavaScript (or any combination of them):

The Stack Snippet editor

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:

The run and edit options of Stack Snippets in the editor preview

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:

The actual Markdown of a Stack Snippet

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!

63 Comments

kschaab Sep 16 2014

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!

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.

AstroCB Sep 16 2014

Looks great: I’ve been able to use them in a few answers already!

This put a huge smile on my face :D

p0sixpscl Sep 16 2014

nice work :) I always wondered when you guys implement your own pasting service.

David Sep 16 2014

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!

Spence Sep 16 2014

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

Jeremy Thompson Sep 16 2014

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

j08691 Sep 16 2014

Love it. But a tidy button to properly indent the code would make it even better.

Abhinay Sep 16 2014

Simply Awesome :)

Ben S Sep 16 2014

It’s cool, but… does seem a bit bloaty to me.

What’s next, replacing dotnetfiddle too? StackIDE?

Bakuriu Sep 16 2014

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.

Jaideep Sep 16 2014

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

Rudy Gunawan Sep 16 2014

This is COOL.

Jakub Narębski Sep 17 2014

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?

Deanna Sep 17 2014

Al. From the earlier demo, just “ as you would normally.

Deanna Sep 17 2014

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.

TylerH Sep 17 2014

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!

Raphael Sep 17 2014

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! :)

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 ❤︎

Sam Sweet Sep 17 2014

Very cool feature. I do love Jsfiddle but this is more convenient

the-wabbit Sep 17 2014

Nice work. I can’t quite remember when ServerFault users were promised to get CloudShark integration – do you know this by any chance?

Brian S Sep 17 2014

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.

Caspar Sep 17 2014

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…

Super AWESOME :-) (y)

Rahul Shetty Sep 18 2014

Sweet. Nice work guys

Well done! It was indeed a required feature for stackoverflow posts!

Stallman Sep 18 2014

Cool, could you also support some other programming language?
Because as I see the code snippet about C++/C/Java, I still have to
compile them. This site http://www.compileonline.com/ could helped people to compile code without the cost of setting up environment.

Átila Camurça Sep 18 2014

It’s great.

But I’ve seen some code that is in a loop, and there’s no way to stop, even if we hide.

Kerry Boyce Sep 18 2014

This is fantastic! I know that I’ve been on various corporate networks where JSFiddle is blocked. Will be great to actually be able to see the working code samples now! :D

Wooooooow…. Well done…

I’ve noticed it lately but this is really cool, thanks for the effort :-)

GolezTrol Sep 18 2014

Very nice, and I’ve used it already.

I noticed that it doesn’t use the selection. That is, if I type or paste a piece of code into the normal editor and then decide that it might make a good Runnable Snippet, I cannot select it and press the button, like I would select the code and press the old indent or quote buttons.

No big deal, but this slight inconsistency confused me for a second.

Cool stuff. Initial feedback:

The first time I clicked “Full Page” I did not see the close button. I used my browser’s back button to exit full page mode, but that just took me to the previous page in my browser history.

Since using my back button was what seemed intuitive to me, maybe that should be supported. Clicking “Full Page” would add a browser history entry and then clicking the browser’s back button would close full page mode. Clicking the “close” button would remove the browser history entry.

that’s pretty cool. I’m a new user but I’ve been on stackoverflow over the last few years.. I love it!

bagus postingannya, keren

I’ve created something similar, http://www.jsexample.com, check it out.


Leave a comment