Today we're proposing a new feature to the Stack Overflow community: Stack Snippets.

What do Stack Snippets do?

Stack Snippets make code blocks runnable. Here's an example:

alert("You can even do alerts");

.hello {  font-weight: bold;  font-size: 1.5em;}

<div class="hello">Stack Snippets allow you to make code runnable.</div>

What's supported?

Stack Snippets work for both questions and answers. The currently supported languages are:

HTML
CSS
JavaScript

You can combine these three languages as you'd please to create runnable code for others to try out. The goal of this feature is to encourage users to create minimally viable and functional code when asking code-centric questions. Answers could then be in the form of a stack snippet which resolved the question at hand. We hope that Stack Snippets enable people to not have to go to other websites in order to produce runnable code.

Eventually we might extend this to other languages, but we're starting with these, because they're easy to do in the browser.

How do I make a stack snippet?

In the Markdown editor window, you'll notice a new button that you can click to launch the Stack Snippets editor.

The editor appears in a full-screen view and allows you to input HTML, CSS, and JavaScript. You can use any or all of them (must use at least one).

When you're done, press Save & insert into post at the top-left to insert your stack snippet into the Markdown text. It gets inserted as regular Markdown code blocks plus some comments that aren't rendered, so they're backwards compatible with revision history, diffs, etc. You can even edit the code right in the Markdown text instead of having to use the full-screen editor.

Why?

Every question is better for having minimal, reproducible code. Right now the best way to tell people to do that is to point them to JSFiddle, which is off-site. Using this feature, we plan to push new posters to embed runnable code that reproduces their problem.

Similarly, answers that include runnable code are easier to use and understand, because you can try them out. Obviously JSFiddle is hugely popular in answers already, so we just wanted to make it even easier to use.

Obviously the same rules apply: code-only questions or answers will still be blocked (and, in fact, because of how it's implemented all the existing checks will just work out of the box).

What browsers are supported?

Currently, Stack Snippets will be active for any browser which supports HTML 5's iframe sandbox feature. This mostly aligns with our goal to support 2 releases back from the current version of all modern browsers, with the exception of IE9. See this link for more information.

When inactive, Stack Snippets gracefully render as regular code blocks, so that the code is still a part of the question or answer.