How to link HTML to Javascript Codepen

I've been told to create a "runnable" example with "Stack Snippets", how do I do that?

Stack Snippets are an on-site tool similar to http://jsfiddle.net or http://codepen.io or http://plnkr.co. They're more limited than those tools, but they have the advantage of being on-site, so your code / markup is in your question (or answer), not just linked, and so it's accessible even if the off-site location isn't, and people don't have to go off-site to help you / get help from you. They were announced and initially documented in this SE blog post, but it's markedly out of date now.

In a snippet, you provide your HTML, CSS, and / or JavaScript, and then it can be run with the click of a button, with the result shown within your question (or answer; let's say "post").

Grade: Snippets are for runnable examples in the browser demonstrating a problem. If your snippet code isn't going to be runnable in the browser (see Steps 3 and 4 below), don't use a snippet; just highlight it and use the button (or) - or indent each line four spaces - to format your code as a code block instead.

This answer covers snippets generically. Some libraries or technologies have their own answers tailored specifically to them:

Basics

To create a snippet:

  1. Open the Stack Snippets editor, either by clicking the toolbar button or, with the cursor present in the answer box, pressing:

That will give you a pop-up dialog with controls on the left and four panes on the right:

  1. Enter your HTML, CSS, and / or JavaScript, putting each (with no wrapper) in its labeled pane. Don't put a or tag around your html, tag around your JavaScript or tag around your CSS; that will be done for you. Just put them in the correct pane.
  • If your code needs Ajax, you can simulate it with and static data.

  • If you need to show that isn't preventing the default of following a link, see this question about how to do that (since Stack Snippets won't let you navigate to a different document or open a new window). (TL; DR - Use a link to a fragment identifier.)

  1. When you've put in your HTML, CSS, and / or JavaScript, click the run button to make sure the snippet shows what you want it to show in the Result pane.

  2. Make sure your code is properly and consistently formatted. (You can use the Tidy button in the editor to have it apply its rules to your code if you like.)

  3. When the snippet works, demonstrating what you're trying to show, and the code is properly and consistently formatted, click Save & insert into post to save it to the text of your question (or answer) and close the snippet editor. (You can always reopen it later by clicking the edit the above snippet link under the snippet.)

Details

The Panes

The four panes in the snippet editor are:

  • HTML - The top-left pane. Only the content goes here. When you run the snippet, it will be wrapped in markup including tags.

  • CSS - The top-right pane. Your CSS goes here, as though it were in a stylesheet or an element (which is where it will go).

  • JavaScript - The bottom-left pane. Your JavaScript goes here. When the snippet is rendered, this will be in an element at the end of the, nach any HTML you've included.

  • Result - The bottom-right pane. Your snippet is rendered here.

Actions

  • To run the snippet, click run

  • To pass the code and markup through a "pretty printer", click Tidy

  • To completely wipe out the code and settings in the snippet editor, click Reset

  • To leave the editor without saving the snippet to your post, click Cancel

Including libraries, etc.

If the library you want to use is listed in the drop-downs on the left, just pick it from the drop-down; the editor will insert a tag (or multiple tags) in the HTML for that library. You can always edit or remove it later.

To include a library or stylesheet that isn't listed, you can use the Add an external library button and provide a URL; the editor will then automatically add either a tag or a tag for it in the HTML pane. Typically you'd source these from a CDN like http://cdnjs.com.

Ajax

If your code needs Ajax, you can simulate it with and static data. Instead of:

you'd do:

or if you need a promise:

Console

By default, an in-snippet console will be included, so that and similar statements generate output to the result pane. This involves adding console-specific CSS and markup to your snippet, which in some relatively-rare cases may interfere with what you're trying to show. If you don't intend to use and such, untick the box. If you do, though, it's very handy to have those results shown in the result pane rather than hidden away in the browser's console.

The console is limited to only the bottom of the result window. If your only output is to the console, you can force that area to fill the window by adding this CSS (sadly, there is no actual option for doing this):

The console also by default limits to 50 entries. You can disable that limit using this JavaScript:

... or of course use your own limit by supplying a number other than 50.

canon, who wrote the snippet console, added some other options years ago, but they don't appear to have been deployed to the SE network, and no UI for the options exists.

Transpiling

By default, your code is run "as is" in the browser. But if you tick the Use BabelJS / ES2015 checkbox, your code will be transpiled using the in-browser version of http://babeljs.io. This isn't needed much here in 2017 as all major browsers support the vast majority of ES2015 +, but you'd use it for a React snippet for example.

Showing / hiding by default

By default, when you insert your snippet in your post, it will show the content of the snippet. Often that's exactly what you want: to show your code. But if you're doing a snippet that's just a live example of code blocks you've already written, or demonstrating minor tweaks to a previous snippet, etc., you may not want it to take up that much space. If so, tick the Hide snippet by default checkbox.

Example

Here's an example snippet with HTML, CSS, and JavaScript, loading an external library (jQuery):

Notice that:

  • Our JavaScript is added to the resulting page nach the markup in our HTML pane (if it weren't, the snippet above wouldn't show anything because the wouldn't be there when the code ran).
  • We don't have a tag around our JavaScript (it's added for us)
  • We don't have a tag around our CSS
  • In this case, we didn't tick the Hide snippet by default checkbox, so the snippet's code is shown
  • Since we weren't using the console, we unticked the Show console checkbox

Here's that exact same snippet, but with the Hide snippet by default checkbox ticked:

And here's a JavaScript-only snippet using: