\u003C/a>\n\nCan become a \u003Cem>runnable\u003C/em> code block:\n\n\u003Ca href=\"//i.stack.imgur.com/YMvu1.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/YMvu1.png\" alt=\"Runnable code block\" />\u003C/a>\n\nThe code will not run until you press the “Run code snippet\u003Cstrong>”\u003C/strong> button:\n\n\u003Ca href=\"//i.stack.imgur.com/b9ukx.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/b9ukx.png\" alt=\"Runnable code block that has been executed\" />\u003C/a>\n\n\u003Ch2>How Do I Make A Stack Snippet?\u003C/h2>\n\nStack 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.\n\n\u003Ca href=\"//i.stack.imgur.com/h6BFu.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/h6BFu.png\" alt=\"The Markdown toolbar with the new Stack Snippet button\" />\u003C/a>\n\nThe editor appears and allows you to enter HTML, CSS, and JavaScript (or any combination of them):\n\n\u003Ca href=\"//i.stack.imgur.com/wx8jF.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/wx8jF.png\" alt=\"The Stack Snippet editor\" />\u003C/a>\n\nOnce 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:\n\n\u003Ca href=\"//i.stack.imgur.com/KO2TC.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/KO2TC.png\" alt=\"The run and edit options of Stack Snippets in the editor preview\" />\u003C/a>\n\nWhen 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.\n\n\u003Ch2>Under the Hood\u003C/h2>\n\nA great feature of Stack Snippets is that they are inserted as \u003Cstrong>regular Markdown code blocks\u003C/strong>:\n\n\u003Ca href=\"//i.stack.imgur.com/zXjtQ.png\">\u003Cimg src=\"http://stackoverflow.blog/wp-content/uploads/2017/04/zXjtQ.png\" alt=\"The actual Markdown of a Stack Snippet\" />\u003C/a>\n\nThis makes them instantly backwards-compatible with our normal revision history and diffs, and also any API clients including our own \u003Ca href=\"http://blog.stackoverflow.com/2014/05/stack-exchange-for-iphone-is-here\">mobile\u003C/a> \u003Ca href=\"http://blog.stackoverflow.com/2014/01/stack-exchange-for-android-is-here\">apps\u003C/a>.\n\nThe 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.\n\n\u003Ch2>Are Stack Snippets Safe?\u003C/h2>\n\n\u003Cstrong>Yes, as much as the web in general is safe.\u003C/strong> You are not in any more danger than you are when browsing any site with JavaScript enabled. With that said, the snippets \u003Cem>are running client code in your browser\u003C/em>, and you should always exercise caution when running code contributed by another user.\n\nWe isolate snippets from our sites to block access to your private Stack Exchange data:\n\n\u003Cul>\n \u003Cli>We use \u003Cstrong>HTML5 sandboxed iframes\u003C/strong> in order to prevent many forms of malicious attack.\u003C/li>\n \u003Cli>We \u003Cstrong>render the Snippets on an external domain\u003C/strong> (\u003Ca href=\"http://stacksnippets.net\">stacksnippets.net\u003C/a>) 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.\u003C/li>\n\u003C/ul>\n\nLike all other aspects of our site, Stack Snippets are ultimately \u003Cstrong>governed by the community\u003C/strong>. 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, \u003Cstrong>downvote the post\u003C/strong>. If you see code that is intended to be harmful (such as an attempt at phishing), you should \u003Cstrong>flag it for moderator attention\u003C/strong>.\n\n\u003Ch2>What About Other Languages?\u003C/h2>\n\nOur 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.\n\n\u003Ch2>What About Sites Like JSFiddle?\u003C/h2>\n\n\u003Cstrong>You can still use sites like JSFiddle if you prefer them\u003C/strong>. 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 \u003Ca href=\"http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle\">copy the relevant code\u003C/a> into your question or answer so that it can be accessed if the external site is unavailable.\n\nWe decided to implement our own version instead of embedding a third-party site for the reasons mentioned earlier:\n\n\u003Cul>\n \u003Cli>\u003Cstrong>There’s no need to copy-paste the code into the post.\u003C/strong> It’s all embedded in the post automatically, so revision history and diffs just work.\u003C/li>\n \u003Cli>\u003Cstrong>There’s no need to visit another site to get your answer. \u003C/strong>The best experience is one where your question and answer(s) are complete and on the same page.\u003C/li>\n \u003Cli>\u003Cstrong>Since we host it, we can guarantee performance and up-time\u003C/strong>. 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.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Give Stack Snippets A Try\u003C/h2>\n\nWe’re excited to see how the community uses Stack Snippets, and looking forward to your feedback:\n\n\u003Cul>\n \u003Cli>If you find bugs, or you’d like to give specific feedback on Stack Snippets, you can post on \u003Ca href=\"http://meta.stackexchange.com/questions/ask?tags=stack-snippets\">Meta Stack Exchange\u003C/a> using the tag \u003Ca href=\"http://meta.stackexchange.com/questions/tagged/stack-snippets\">stack-snippets\u003C/a>.\u003C/li>\n \u003Cli>If you just want to try it out, we’ve \u003Ca href=\"http://meta.stackexchange.com/questions/239456/stack-snippets-sandbox-try-it-out-here\">created a sandbox on Meta Stack Exchange\u003C/a>.\u003C/li>\n \u003Cli>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.\u003C/li>\n\u003C/ul>\n\n\u003Ca href=\"http://codereview.stackexchange.com/questions/62577/bouncing-stacking-boxes\">We've already started piloting it on Code Review and are seeing some neat results\u003C/a>. Don't hesitate to share interesting examples you come across - \u003Cem>or create\u003C/em> - here in the comments.\n\nHave fun!\n\n\u003Chr />\n\nIf you'd like to put your Javascript efforts to work, discover new opportunities in our \u003Ca href=\"https://stackoverflow.com/jobs/developer-jobs-using-javascript?utm_source=so-owned&utm_medium=blog&utm_campaign=dev-c4al&utm_content=c4al-link\" target=\"_blank\" rel=\"noopener\">Javascript job postings\u003C/a>.","html","2014-09-16T12:00:00.000Z",{"current":646},"introducing-runnable-javascript-css-and-html-code-snippets",[648,656,661,666],{"_createdAt":649,"_id":650,"_rev":651,"_type":652,"_updatedAt":649,"slug":653,"title":655},"2023-05-23T16:43:21Z","wp-tagcat-announcements","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":654},"announcements","Announcements",{"_createdAt":649,"_id":657,"_rev":651,"_type":652,"_updatedAt":649,"slug":658,"title":660},"wp-tagcat-community",{"current":659},"community","Community",{"_createdAt":649,"_id":662,"_rev":651,"_type":652,"_updatedAt":649,"slug":663,"title":665},"wp-tagcat-company",{"current":664},"company","Company",{"_createdAt":649,"_id":667,"_rev":651,"_type":652,"_updatedAt":649,"slug":668,"title":670},"wp-tagcat-stackexchange",{"current":669},"stackexchange","Stackexchange","Introducing Runnable JavaScript, CSS, and HTML Code Snippets",[673,679,685,690],{"_id":674,"publishedAt":675,"slug":676,"sponsored":12,"title":678},"9fd8968d-abaa-4253-b14b-3129c6e85408","2025-09-10T17:00:00.000Z",{"_type":10,"current":677},"ai-vs-gen-z","AI vs Gen Z: How AI has changed the career pathway for junior developers",{"_id":680,"publishedAt":681,"slug":682,"sponsored":12,"title":684},"1d082483-6dc6-424b-8b09-9c84b54779da","2025-09-02T17:00:00.000Z",{"_type":10,"current":683},"back-to-school-developers-at-stack-overflow-have-some-advice-for-you","Back to school? Developers at Stack Overflow have some advice for you",{"_id":686,"publishedAt":681,"slug":687,"sponsored":12,"title":689},"5cd91820-9515-4be5-87ae-e919fd443c18",{"_type":10,"current":688},"getting-started-on-stack-overflow-a-step-by-step-guide-for-students","Getting started on Stack Overflow: a step-by-step guide for students",{"_id":691,"publishedAt":681,"slug":692,"sponsored":12,"title":694},"614538a9-c352-4024-adf1-fa44a9f911b6",{"_type":10,"current":693},"stack-overflow-is-helping-you-learn-to-code-with-new-resources","Stack Overflow is helping you learn to code with new resources",{"count":696,"lastTimestamp":697},8,"2023-05-25T09:45:54Z",["Reactive",699],{"$sarticleModal":700},false,["Set"],["ShallowReactive",703],{"sanity-ie_RMh6z1oJQFpGyL3vOFbcpzd9GU5WMsVoC5PHYNRY":-1,"sanity-comment-wp-post-4965-1757618416125":-1},"/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets"]