var editor;
function refreshSvg() {
    var height = $('#vector-height').val();
    var width = $('#vector-width').val();
    var zoomedScale = $('#vector-zoomed-scale').val();
    var backgroundColor = $('#vector-background-color').val();
    var code = editor.getValue();

    // Fix size and general style of preview windows
    $('.preview-container--original').css({
        width              : width,
        height             : height,
        'background-color' : backgroundColor,
    });
    $('.preview-container--zoomed').css({
        width              : width * zoomedScale,
        height             : height * zoomedScale,
        'background-color' : backgroundColor,
    });

    $('.vector-preview--original').html(
        '<svg width="' + width + '" height="' + height + '">' +
         code +
        '</svg>'
    );

    var minimized = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
         code.replace(/>\s+</g, '><') + '</svg>';
    $('#code-output').val(minimized);
    $('#code-output-base64').val('data:image/svg+xml;base64,' + btoa(minimized));

    $('.vector-preview--zoomed').html(
        '<svg width="' + (width * zoomedScale) + '" height="' + (height * zoomedScale) + '">' +
        '<g transform="scale(' + zoomedScale + ')">' +
         code +
        '</g>' +
        '</svg>'
    );
}

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.under-image').attr('src', e.target.result);
            $('.under-image').css('opacity', $('#underlay-opacity').val());
        };

        reader.readAsDataURL(input.files[0]);
    }
}

$(document).ready(function() {
    editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setTheme("ace/theme/iplastic");
    editor.getSession().setMode("ace/mode/svg");
    editor.setValue(
        '<g stroke="#000" stroke-width="2" stroke-linecap="round">' + "\n" +
        '    <path d="M1 19l6-6"/>' + "\n" +
        '    <path d="M9 8h6"/>' + "\n" +
        '    <path d="M12 5v6"/>' + "\n" +
        '</g>' + "\n" +
        '<circle cx="12" cy="8" r="7" fill="none" stroke="#000" stroke-width="2"/>'
    );
    editor.getSession().on('change', refreshSvg);
    $('#vector-width, #vector-height, #vector-zoomed-scale, #vector-background-color').on('change', refreshSvg);

    $("#custom-image-underlay-upload").change(function(){
        readURL(this);
    });
    $('#underlay-opacity').on('change', function() {
        $('.under-image').css('opacity', $(this).val());
    });
    $('#onion-skin-opacity').on('input', function() {
        $('.vector-preview').css('opacity', $(this).val());
    });

    refreshSvg();
});

@@ -1,15 +1,649 @@
-var editor;
+'use strict';%0A%0Avar $   = window.$;%0Avar ace = window.ace;%0Avar editor;%0Avar db;%0A%0Afunction getDefaultCode() %7B%0A    return '%3Cg stroke=%22#000%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M1 19l6-6%22/%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M9 8h6%22/%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M12 5v6%22/%3E' + %22%5Cn%22 +%0A        '%3C/g%3E' + %22%5Cn%22 +%0A        '%3Ccircle cx=%2212%22 cy=%228%22 r=%227%22 fill=%22none%22 stroke=%22#000%22 stroke-width=%222%22/%3E';%0A%7D%0A%0Afunction getSavedCode() %7B%0A    if (localStorage.savedCode) %7B%0A        return localStorage.savedCode;%0A    %7D else %7B%0A        return getDefaultCode();%0A    %7D%0A%7D%0A%0Afunction saveCode(code) %7B%0A    localStorage.savedCode = code;%0A%7D%0A
 %0Afun
@@ -900,16 +900,36 @@
 Value();
+%0A    saveCode(code);
 %0A%0A    //
@@ -2590,328 +2590,22 @@
 lue(
-%0A        '%3Cg stroke=%22#000%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M1 19l6-6%22/%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M9 8h6%22/%3E' + %22%5Cn%22 +%0A        '    %3Cpath d=%22M12 5v6%22/%3E' + %22%5Cn%22 +%0A        '%3C/g%3E' + %22%5Cn%22 +%0A        '%3Ccircle cx=%2212%22 cy=%228%22 r=%227%22 fill=%22none%22 stroke=%22#000%22 stroke-width=%222%22/%3E'%0A    
+getSavedCode()
 );%0A 

Save after every change