Snippetify is a script that is designed to make StackSnippets with JS submissions on the main site easy.


Let's say we are answering a simple challenge to repeat a string N times. A possible JS submission might be:


that is called with the first parameter the string to repeat and the second param (uses currying) is the number of times to repeat that.

Let's say we want that in a stack snippet. Here's the old-fashioned way:

var repeat = 
//actual code

document.getElementById("submit").onclick = function(){
  document.getElementById("output").innerText = repeat(document.getElementById("string").value)(document.getElementById("repeat-count").value);
  display: block;
<input id = "string">
<input type = "number" id = "repeat-count">
<button id = "submit">Submit</button>
<div id = "output"></div>

That's alot of code for just a=>b=>a.repeat(b). If you use Snippetify, you can do this:

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text" data-attribute = "0">
<input type = "number" data-attribute = "1">
<div data-output></div>

Better, huh! If you pass Snippetify function that accepts 1 argument (all currying functions) and you have more than one input it will know to use currying. But it gets better:

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text" data-attribute>
<input type = "number" data-attribute>
<div data-output></div>

If you want your parameters passed in order of the <input>s provided, you can just use data-attribute with no value. But it gets even better:

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text">
<input type = "number">
<div data-output></div>

Snippetify will use all your <input>s (and <textarea>s) if you don't use data-attribute. Still too much work? Try this:

<script src="https://programmer5000.com/snippetify.min.js"></script>
<input type = "text">
<input type = "number">

You don't need data-output if you would like output to go to the first <div> in the DOM. One final laziness addition (this works only with non-currying functions and text-only inputs):

Snippetify((a,b)=>a + b);
<script src="https://programmer5000.com/snippetify.min.js"></script>

Yep, Snippetify will even create everything for you if it can.


When you add a code snippet, add this to your HTML (before anything else)

<script src="https://programmer5000.com/snippetify.min.js"></script>

See above for markup needed.

What this post is for

Have any bugs feature requests, or general feedback? Comment or answer below.

Snippetify License

CC0. You can use it in any answer to a code golf challenge.

Source code, etc.

  • \$\begingroup\$ Have you posted this on mother meta? \$\endgroup\$
    – Okx
    Commented Apr 11, 2017 at 15:38
  • \$\begingroup\$ It may be, yeah. \$\endgroup\$
    – Okx
    Commented Apr 11, 2017 at 16:00
  • 3
    \$\begingroup\$ @programmer5000 I'd wait for a bit, see how it's received here. \$\endgroup\$
    – Riker
    Commented Apr 11, 2017 at 16:03
  • \$\begingroup\$ Can we make a community wiki answer to this post for testing purposes? or can I just make a non-community wiki for me to screw around with? \$\endgroup\$
    – Riker
    Commented Apr 11, 2017 at 16:04
  • \$\begingroup\$ Are my edits to the answer okay? I've tried to make a better UI and minified version. \$\endgroup\$
    – Riker
    Commented Apr 11, 2017 at 16:49
  • 8
    \$\begingroup\$ I don't think this is a good idea, because then every snippet using this method will be dependent on your website. A much better solution would be to create a snippet that takes JS code as input and outputs the SE markup for the snippet to include, or just use the existing method. After all, SE is more secure. \$\endgroup\$
    – mbomb007
    Commented Apr 11, 2017 at 20:36
  • 7
    \$\begingroup\$ Not only is SE more secure, but also more likely to still be functional in a year, or two, or three. Personal domains like this go bad all the time, and breaking a large number of answers all at once would be a Bad Thing. \$\endgroup\$
    – Geobits
    Commented Apr 12, 2017 at 10:16
  • \$\begingroup\$ @programmer5000 But someone would still have to pay for hosting it. And there's no guarantee that'd be happening in the future. Stick with what SE provides. \$\endgroup\$
    – mbomb007
    Commented Apr 12, 2017 at 15:33
  • 1
    \$\begingroup\$ Won't Snippetify being GPL licensed mean that all snippets using it must become GPL-licensed as well? (Assuming that calling Snippetify with some code counts as "linking".) (See under "disclose source" here.) \$\endgroup\$ Commented Apr 12, 2017 at 15:49
  • \$\begingroup\$ If we could do that truly well, Dennis should've made TIO: Stack snippets edition already. \$\endgroup\$ Commented Apr 12, 2017 at 15:56
  • 1
    \$\begingroup\$ Might I reccomend adding babel? Seems like you're pollyfilling a bunch of things so why not syntax? :) \$\endgroup\$
    – Downgoat
    Commented Apr 13, 2017 at 2:10
  • 2
    \$\begingroup\$ Output to a <pre> would generally be more useful, but especially for ascii-art. \$\endgroup\$
    – Neil
    Commented Apr 13, 2017 at 8:46
  • \$\begingroup\$ Perhaps make the script run on submit and encapsulate it in a form for semantics and accessibility. \$\endgroup\$ Commented Apr 17, 2017 at 1:09
  • \$\begingroup\$ I've added some more things in the chatroom \$\endgroup\$ Commented Apr 17, 2017 at 1:42
  • 1
    \$\begingroup\$ @DavidArchibald <form>s are blocked in Stack Snippets in browsers that support frame options. \$\endgroup\$
    – Neil
    Commented Apr 17, 2017 at 19:17

2 Answers 2


Good intentions, bad idea

While you have good intentions, using an external site to host a bunch of snippets will mean that we cannot rely on it always being there in a few years, because it's neither maintained nor paid for by Stack Exchange.

If whatever domain you use to host this expires in the future, any questions and answers using this method would no longer have working snippets.

Stack Exchange can be contacted about their snippets not working and a fix would be provided, but if we rely on you for all of our snippets, there's no guarantee that you'll be around to provide a fix if something breaks, and you're certainly not paid to fix it. Using the built-in method of creating a stack snippet is the most secure, most reliable method, and that makes it the best choice.

A better alternative to simplify snippet creation would be if you created a snippet or program that could take JS as input and output markup for a working snippet that could be pasted into an answer.


Testing Ground (community wiki)

Because this is a community wiki, anybody can edit this answer, regardless of their reputation.

Note: If you want to use no markup, you must set console to false in the Stack Snippet.

Here is a minified version of the below HTML to include in your posts.

Please only edit anything below this line:

// Call Snippetify with the function you want to test as a parameter. 
// If it doesn't work, make sure that you're passing a function and that 
// The Snippetify script is included in the HTML.
<script src="https://programmer5000.com/snippetify.min.js"></script> 

textarea {
    /* border: none !important; */

    /* remove previous comment/replace comment to toggle border on output box 
    (will look like a blank space when no output) */
    overflow: auto !important;
    outline: none !important;

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    resize: none !important;

<!-- begin inputs -->
<label for="input1">Input 1:<br></label>
<input type="text" name="input1" id="input1">

<!-- you can add more inputs by just copy-pasting and changing
     the 1s to 2s, 3s, etc. -->
<!-- end inputs -->

<button id="submit" style="float: left;">Submit</button><br><br>

<label for="output">Output:<br></label>

<textarea id="output" data-output readonly></textarea>
<div date-output></div>

  • \$\begingroup\$ Why doesn't the output textarea show anything? \$\endgroup\$
    – user41805
    Commented Apr 12, 2017 at 10:07
  • \$\begingroup\$ Those keystrokes don't do anything for me (Cmd + F5 opens VoiceOver, but otherwise yeah). So what are these keystrokes supposed to do? \$\endgroup\$
    – user41805
    Commented Apr 12, 2017 at 12:30
  • \$\begingroup\$ It works now :) \$\endgroup\$
    – user41805
    Commented Apr 12, 2017 at 12:38
  • \$\begingroup\$ Hmm, We could use Snippetify(Snippetify(a=>a)) to make a Snippetifier with the code given in the input, right? \$\endgroup\$ Commented Apr 13, 2017 at 14:42
  • \$\begingroup\$ Can I fix some of the formatting and grammar in the first few sentences @Riker? \$\endgroup\$ Commented Apr 17, 2017 at 1:10
  • \$\begingroup\$ @DavidArchibald sure, feel free. \$\endgroup\$
    – Riker
    Commented Apr 17, 2017 at 1:12

You must log in to answer this question.