diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 6cebaec88..20b320436 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -575,64 +575,63 @@ define([
 
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
-            appToolbar(),
-            h('div#canvas-area', h('canvas#canvas', {
+            h('div#cp-toolbar.cp-toolbar-container'),
+            h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
                 width: 600,
                 height: 600
             })),
-            h('div#controls', {
+            h('div#cp-app-whiteboard-controls', {
                 style: {
                     display: 'block',
                 }
             }, [
-                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw.btn.btn-secondary', Msg.canvas_disable),
-                h('button#delete.btn.btn-secondary', {
+                h('button#cp-app-whiteboard-clear.btn.btn-danger', Msg.canvas_clear), ' ',
+                h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Msg.canvas_disable),
+                h('button#cp-app-whiteboard-delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
                 }, Msg.canvas_delete),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'width'
+                        'for': 'cp-app-whiteboard-width'
                     }, Msg.canvas_width),
-                    h('input#width', {
+                    h('input#cp-app-whiteboard-width', {
                         type: 'range',
                         value: "5",
                         min: "1",
                         max: "100"
                     }),
-                    h('span#width-val', '5px')
+                    h('span#cp-app-whiteboard-width-val', '5px')
                 ]),
-                h('div.range-group', [
+                h('div.cp-app-whiteboard-range-group', [
                     h('label', {
-                        'for': 'opacity',
+                        'for': 'cp-app-whiteboard-opacity',
                     }, Msg.canvas_opacity),
-                    h('input#opacity', {
+                    h('input#cp-app-whiteboard-opacity', {
                         type: 'range',
                         value: "1",
                         min: "0.1",
                         max: "1",
                         step: "0.1"
                     }),
-                    h('span#opacity-val', '100%')
+                    h('span#cp-app-whiteboard-opacity-val', '100%')
                 ]),
-                h('span.selected', [
+                h('span.cp-app-whiteboard-selected', [
                     h('img', {
                         title: Msg.canvas_currentBrush
                     })
                 ])
             ]),
-            setHTML(h('div#colors'), ' '),
-            loadingScreen(),
-            h('div#cursors', {
+            setHTML(h('div#cp-app-whiteboard-colors'), ' '),
+            h('div#cp-app-whiteboard-cursors', {
                 style: {
                     display: 'none',
                     background: 'white',
                     'text-align': 'center',
                 }
             }),
-            h('div#pickers'),
+            h('div#cp-app-whiteboard-pickers'),
         ];
     };
 
diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less
index 1fcd30815..1ddf45fbc 100644
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@@ -27,4 +27,5 @@ body.cp-app-code { @import "../../../code/app-code.less"; }
 body.cp-app-slide { @import "../../../slide/app-slide.less"; }
 body.cp-app-file { @import "../../../file/app-file.less"; }
 body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
+body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 
diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js
index a4c01c0bf..f7e4f6985 100644
--- a/www/common/LessLoader.js
+++ b/www/common/LessLoader.js
@@ -118,6 +118,7 @@ define([
             }
             console.log('CACHE MISS ' + url);
             ((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) {
+                if (err) { console.error(err); }
                 var output = fixAllURLs(css, url);
                 cachePut(url, output);
                 inject(output, url);
diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js
index 0a7306cdf..d62bb392f 100644
--- a/www/common/sframe-common-interface.js
+++ b/www/common/sframe-common-interface.js
@@ -182,11 +182,18 @@ define([
                 break;
             case 'more':
                 button = $('<button>', {
-                    title: Messages.moreActions || 'TODO',
+                    title: Messages.moreActions,
                     'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
                     style: 'font:'+size+' FontAwesome'
                 });
                 break;
+            case 'savetodrive':
+                button = $('<button>', {
+                    'class': 'fa fa-cloud-upload',
+                    title: Messages.canvas_saveToDrive,
+                })
+                .click(common.prepareFeedback(type));
+                break;
             default:
                 button = $('<button>', {
                     'class': "fa fa-question",
diff --git a/www/oldwhiteboard/colors.js b/www/oldwhiteboard/colors.js
new file mode 100644
index 000000000..d812f4d34
--- /dev/null
+++ b/www/oldwhiteboard/colors.js
@@ -0,0 +1,52 @@
+define(function () {
+    var padZero = function (str, len) {
+        len = len || 2;
+        var zeros = new Array(len).join('0');
+        return (zeros + str).slice(-len);
+    };
+    var invertColor = function (hex) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        // convert 3-digit hex to 6-digits.
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (hex.length !== 6) {
+            console.error(hex);
+            throw new Error('Invalid HEX color.');
+        }
+        // invert color components
+        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
+            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
+            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
+        // pad each with zeros and return
+        return '#' + padZero(r) + padZero(g) + padZero(b);
+    };
+    var rgb2hex = function (rgb) {
+        if (rgb.indexOf('#') === 0) { return rgb; }
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        var hex = function (x) {
+            return ("0" + parseInt(x).toString(16)).slice(-2);
+        };
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    };
+    var hex2rgba = function (hex, opacity) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (!opacity) { opacity = 1; }
+        var r = parseInt(hex.slice(0,2), 16);
+        var g = parseInt(hex.slice(2,4), 16);
+        var b = parseInt(hex.slice(4,6), 16);
+        return 'rgba('+r+', '+g+', '+b+', '+opacity+')';
+    };
+    return {
+        invert: invertColor,
+        rgb2hex: rgb2hex,
+        hex2rgba: hex2rgba
+    };
+});
diff --git a/www/oldwhiteboard/index.html b/www/oldwhiteboard/index.html
new file mode 100644
index 000000000..a5794b8d6
--- /dev/null
+++ b/www/oldwhiteboard/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="cp">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+</head>
+<body>
+
diff --git a/www/oldwhiteboard/main.js b/www/oldwhiteboard/main.js
new file mode 100644
index 000000000..17e929d9b
--- /dev/null
+++ b/www/oldwhiteboard/main.js
@@ -0,0 +1,511 @@
+define([
+    'jquery',
+    '/api/config',
+    '/bower_components/chainpad-netflux/chainpad-netflux.js',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar2.js',
+    '/bower_components/textpatcher/TextPatcher.amd.js',
+    'json.sortify',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    '/common/cryptpad-common.js',
+    '/common/cryptget.js',
+    '/whiteboard/colors.js',
+    '/customize/application_config.js',
+    '/common/common-thumbnail.js',
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/customize/src/less/cryptpad.less',
+    'less!/whiteboard/whiteboard.less',
+    'less!/customize/src/less/toolbar.less',
+], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
+    var saveAs = window.saveAs;
+    var Messages = Cryptpad.Messages;
+
+    var module = window.APP = { $:$ };
+    var Fabric = module.Fabric = window.fabric;
+
+    $(function () {
+    Cryptpad.addLoadingScreen();
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+    var toolbar;
+
+    var secret = Cryptpad.getSecrets();
+    var readOnly = secret.keys && !secret.keys.editKeyStr;
+    if (!secret.keys) {
+        secret.keys = secret.key;
+    }
+
+    var andThen = function () {
+        /* Initialize Fabric */
+        var canvas = module.canvas = new Fabric.Canvas('canvas');
+        var $canvas = $('canvas');
+        var $controls = $('#controls');
+        var $canvasContainer = $('canvas').parents('.canvas-container');
+        var $pickers = $('#pickers');
+        var $colors = $('#colors');
+        var $cursors = $('#cursors');
+        var $deleteButton = $('#delete');
+
+        var brush = {
+            color: '#000000',
+            opacity: 1
+        };
+
+        var $toggle = $('#toggleDraw');
+        var $width = $('#width');
+        var $widthLabel = $('label[for="width"]');
+        var $opacity = $('#opacity');
+        var $opacityLabel = $('label[for="opacity"]');
+window.canvas = canvas;
+        var createCursor = function () {
+            var w = canvas.freeDrawingBrush.width;
+            var c = canvas.freeDrawingBrush.color;
+            var size = w > 30 ? w+2 : w+32;
+            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
+            var $ccanvas = $cursors.find('canvas');
+            var ccanvas = $ccanvas[0];
+
+            var ctx = ccanvas.getContext('2d');
+            var centerX = size / 2;
+            var centerY = size / 2;
+            var radius = w/2;
+
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = c;
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = brush.color;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
+            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
+            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
+            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
+            ctx.strokeStyle = '#000000';
+            ctx.stroke();
+
+            var img = ccanvas.toDataURL("image/png");
+            $controls.find('.selected > img').attr('src', img);
+            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
+        };
+
+        var updateBrushWidth = function () {
+            var val = $width.val();
+            canvas.freeDrawingBrush.width = Number(val);
+            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#width-val').text(val + 'px');
+            createCursor();
+        };
+        updateBrushWidth();
+
+        $width.on('change', updateBrushWidth);
+
+        var updateBrushOpacity = function () {
+            var val = $opacity.val();
+            brush.opacity = Number(val);
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#opacity-val').text((Number(val) * 100) + '%');
+            createCursor();
+        };
+        updateBrushOpacity();
+
+        $opacity.on('change', updateBrushOpacity);
+
+        var pickColor = function (current, cb) {
+            var $picker = $('<input>', {
+                type: 'color',
+                value: '#FFFFFF',
+                })
+            // TODO confirm that this is safe to remove
+            //.css({ visibility: 'hidden' })
+            .on('change', function () {
+                var color = this.value;
+                cb(color);
+            }).appendTo($pickers);
+            setTimeout(function () {
+                $picker.val(current);
+                $picker.click();
+            });
+        };
+
+        var setColor = function (c) {
+            c = Colors.rgb2hex(c);
+            brush.color = c;
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            module.$color.css({
+                'color': c,
+            });
+            createCursor();
+        };
+
+
+        var palette = AppConfig.whiteboardPalette || [
+            'red', 'blue', 'green', 'white', 'black', 'purple',
+            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
+        ];
+
+        $('.palette-color').on('click', function () {
+            var color = $(this).css('background-color');
+            setColor(color);
+        });
+
+        module.draw = true;
+        var toggleDrawMode = function () {
+            module.draw = !module.draw;
+            canvas.isDrawingMode = module.draw;
+            $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
+            if (module.draw) { $deleteButton.hide(); }
+            else { $deleteButton.show(); }
+        };
+        $toggle.click(toggleDrawMode);
+
+        var deleteSelection = function () {
+            if (canvas.getActiveObject()) {
+                canvas.getActiveObject().remove();
+            }
+            if (canvas.getActiveGroup()) {
+                canvas.getActiveGroup()._objects.forEach(function (el) {
+                    el.remove();
+                });
+                canvas.discardActiveGroup();
+            }
+            canvas.renderAll();
+            module.onLocal();
+        };
+        $deleteButton.click(deleteSelection);
+        $(window).on('keyup', function (e) {
+            if (e.which === 46) { deleteSelection (); }
+        });
+
+        var setEditable = function (bool) {
+            if (readOnly && bool) { return; }
+            if (bool) { $controls.css('display', 'flex'); }
+            else { $controls.hide(); }
+
+            canvas.isDrawingMode = bool ? module.draw : false;
+            if (!bool) {
+                canvas.deactivateAll();
+                canvas.renderAll();
+            }
+            canvas.forEachObject(function (object) {
+                object.selectable = bool;
+            });
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
+        };
+
+        var saveImage = module.saveImage = function () {
+            var defaultName = "pretty-picture.png";
+            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
+                if (!(typeof(filename) === 'string' && filename)) { return; }
+                $canvas[0].toBlob(function (blob) {
+                    saveAs(blob, filename);
+                });
+            });
+        };
+
+        module.FM = Cryptpad.createFileManager({});
+        module.upload = function (title) {
+            var canvas = $canvas[0];
+            var finish = function (thumb) {
+                canvas.toBlob(function (blob) {
+                    blob.name = title;
+                    module.FM.handleFile(blob, void 0, thumb);
+                });
+            };
+
+            Thumb.fromCanvas(canvas, function (e, blob) {
+                // carry on even if you can't get a thumbnail
+                if (e) { console.error(e); }
+                finish(blob);
+            });
+        };
+
+        var initializing = true;
+
+        var $bar = $('#toolbar');
+
+        var Title;
+        var UserList;
+        var Metadata;
+
+        var config = module.config = {
+            initialState: '{}',
+            websocketURL: Cryptpad.getWebsocketURL(),
+            validateKey: secret.keys.validateKey,
+            readOnly: readOnly,
+            channel: secret.channel,
+            crypto: Crypto.createEncryptor(secret.keys),
+            transformFunction: JsonOT.transform,
+        };
+
+        var addColorToPalette = function (color, i) {
+            if (readOnly) { return; }
+            var $color = $('<span>', {
+                'class': 'palette-color',
+            })
+            .css({
+                'background-color': color,
+            })
+            .click(function () {
+                var c = Colors.rgb2hex($color.css('background-color'));
+                setColor(c);
+            })
+            .on('dblclick', function (e) {
+                e.preventDefault();
+                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
+                    $color.css({
+                        'background-color': c,
+                    });
+                    palette.splice(i, 1, c);
+                    config.onLocal();
+                    setColor(c);
+                });
+            });
+
+            $colors.append($color);
+        };
+
+        var metadataCfg = {};
+        var updatePalette = metadataCfg.updatePalette = function (newPalette) {
+            palette = newPalette;
+            $colors.html('<div class="hidden">&nbsp;</div>');
+            palette.forEach(addColorToPalette);
+        };
+        updatePalette(palette);
+
+        var makeColorButton = function ($container) {
+            var $testColor = $('<input>', { type: 'color', value: '!' });
+
+            // if colors aren't supported, bail out
+            if ($testColor.attr('type') !== 'color' ||
+                $testColor.val() === '!') {
+                console.log("Colors aren't supported. Aborting");
+                return;
+            }
+
+            var $color = module.$color = $('<button>', {
+                id: "color-picker",
+                title: Messages.canvas_chooseColor,
+                'class': "fa fa-square rightside-button",
+            })
+            .on('click', function () {
+                pickColor($color.css('background-color'), function (color) {
+                    setColor(color);
+                });
+            });
+
+            setColor('#000');
+
+            $container.append($color);
+
+            return $color;
+        };
+
+        config.onInit = function (info) {
+            UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
+
+            Title = Cryptpad.createTitle({}, config.onLocal, Cryptpad);
+
+            Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
+
+            var configTb = {
+                displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
+                userList: UserList.getToolbarConfig(),
+                share: {
+                    secret: secret,
+                    channel: info.channel
+                },
+                title: Title.getTitleConfig(),
+                common: Cryptpad,
+                readOnly: readOnly,
+                ifrw: window,
+                realtime: info.realtime,
+                network: info.network,
+                $container: $bar,
+                $contentContainer: $('#canvas-area')
+            };
+
+            toolbar = module.toolbar = Toolbar.create(configTb);
+
+            Title.setToolbar(toolbar);
+
+            var $rightside = toolbar.$rightside;
+
+            /* save as template */
+            if (!Cryptpad.isTemplate(window.location.href)) {
+                var templateObj = {
+                    rt: info.realtime,
+                    Crypt: Cryptget,
+                    getTitle: function () { return document.title; }
+                };
+                var $templateButton = Cryptpad.createButton('template', true, templateObj);
+                $rightside.append($templateButton);
+            }
+
+            var $export = Cryptpad.createButton('export', true, {}, saveImage);
+            $rightside.append($export);
+
+            Cryptpad.createButton('savetodrive', true, {}, function () {})
+            .click(function () {
+                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
+                function (name) {
+                    if (name === null || !name.trim()) { return; }
+                    module.upload(name);
+                });
+            }).appendTo($rightside);
+
+            var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
+                if (err) { return; }
+                setEditable(false);
+                toolbar.failed();
+            });
+            $rightside.append($forget);
+
+            var editHash;
+
+            if (!readOnly) {
+                editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+                makeColorButton($rightside);
+            }
+            if (!readOnly) { Cryptpad.replaceHash(editHash); }
+        };
+
+        // used for debugging, feel free to remove
+        var Catch = function (f) {
+            return function () {
+                try {
+                    f();
+                } catch (e) {
+                    console.error(e);
+                }
+            };
+        };
+
+        var onRemote = config.onRemote = Catch(function () {
+            if (initializing) { return; }
+            var userDoc = module.realtime.getUserDoc();
+
+            Metadata.update(userDoc);
+            var json = JSON.parse(userDoc);
+            var remoteDoc = json.content;
+
+            // TODO update palette if it has changed
+
+            canvas.loadFromJSON(remoteDoc);
+            canvas.renderAll();
+
+            var content = canvas.toDatalessJSON();
+            if (content !== remoteDoc) { Cryptpad.notify(); }
+            if (readOnly) { setEditable(false); }
+        });
+        setEditable(false);
+
+        var stringifyInner = function (textValue) {
+            var obj = {
+                content: textValue,
+                metadata: {
+                    users: UserList.userData,
+                    palette: palette,
+                    defaultTitle: Title.defaultTitle,
+                    type: 'whiteboard',
+                }
+            };
+            if (!initializing) {
+                obj.metadata.title = Title.title;
+            }
+            // stringify the json and send it into chainpad
+            return JSONSortify(obj);
+        };
+
+
+        var onLocal = module.onLocal = config.onLocal = Catch(function () {
+            if (initializing) { return; }
+            if (readOnly) { return; }
+
+            var content = stringifyInner(canvas.toDatalessJSON());
+
+            module.patchText(content);
+        });
+
+        config.onReady = function (info) {
+            var realtime = module.realtime = info.realtime;
+            module.patchText = TextPatcher.create({
+                realtime: realtime
+            });
+
+            var isNew = false;
+            var userDoc = module.realtime.getUserDoc();
+            if (userDoc === "" || userDoc === "{}") { isNew = true; }
+            else {
+                var hjson = JSON.parse(userDoc);
+                if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
+                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
+                    Cryptpad.errorLoadingScreen(Messages.typeError);
+                    throw new Error(Messages.typeError);
+                }
+            }
+
+            Cryptpad.removeLoadingScreen();
+            setEditable(true);
+            initializing = false;
+            onRemote();
+
+            /*  TODO: restore palette from metadata.palette */
+
+            if (readOnly) { return; }
+            UserList.getLastName(toolbar.$userNameButton, isNew);
+        };
+
+        config.onAbort = function () {
+            setEditable(false);
+            toolbar.failed();
+            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+        };
+
+        // TODO onConnectionStateChange
+        config.onConnectionChange = function (info) {
+            setEditable(info.state);
+            toolbar.failed();
+            if (info.state) {
+                initializing = true;
+                toolbar.reconnecting(info.myId);
+                Cryptpad.findOKButton().click();
+            } else {
+                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+            }
+        };
+
+        module.rt = Realtime.start(config);
+
+        canvas.on('mouse:up', onLocal);
+
+        $('#clear').on('click', function () {
+            canvas.clear();
+            onLocal();
+        });
+
+        $('#save').on('click', function () {
+            saveImage();
+        });
+    };
+
+    Cryptpad.ready(function () {
+        andThen();
+        Cryptpad.reportAppUsage();
+    });
+    Cryptpad.onError(function (info) {
+        if (info) {
+            onConnectError();
+        }
+    });
+
+    });
+});
diff --git a/www/whiteboard/whiteboard.less b/www/oldwhiteboard/whiteboard.less
similarity index 100%
rename from www/whiteboard/whiteboard.less
rename to www/oldwhiteboard/whiteboard.less
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
new file mode 100644
index 000000000..0794f2271
--- /dev/null
+++ b/www/whiteboard/app-whiteboard.less
@@ -0,0 +1,139 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+
+// body
+&.cp-app-whiteboard {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+
+    .middle () {
+        position: relative;
+        vertical-align: middle;
+    }
+    .hidden {
+        display: none;
+    }
+
+    // created in the html
+    #cp-app-whiteboard-canvas-area {
+        flex: 1;
+        display: flex;
+    }
+    // created by fabricjs. styled so defaults don't break anything
+    .cp-app-whiteboard-canvas-container {
+        margin: auto;
+        background: white;
+        & > canvas {
+            border: 1px solid black;
+        }
+    }
+
+    // contains user tools
+    #cp-app-whiteboard-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: relative;
+        border-top: 1px solid black;
+        background: white;
+
+        padding: 1em;
+
+        & > * + * {
+            margin: 0;
+            margin-left: 1em;
+        }
+
+        #cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
+            .middle;
+        }
+        #cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
+            display: inline;
+            vertical-align: middle;
+        }
+        .cp-app-whiteboard-selected {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9001;
+
+            width: 100px;
+            height: 100px;
+        }
+
+        .cp-app-whiteboard-range-group {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            input[type="range"] {
+                background-color: inherit;
+            }
+
+            & > span {
+                cursor: default;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+        .cp-app-whiteboard-range-group:first-of-type {
+            margin-left: 2em;
+        }
+        .cp-app-whiteboard-range-group:last-of-type {
+            margin-right: 1em;
+        }
+    }
+
+    /* Colors */
+    #cp-app-whiteboard-colors {
+        .middle;
+        z-index: 100;
+        background: white;
+        display: flex;
+        justify-content: space-between;
+
+        padding: 1em;
+
+        span.cp-app-whiteboard-palette-color {
+            height: 4vw;
+            width: 4vw;
+            display: block;
+            margin: 5px;
+            border: 1px solid black;
+            vertical-align: top;
+            border-radius: 50%;
+            transition: transform 0.1s;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+
+    // used in the toolbar if supported
+    #cp-app-whiteboard-color-picker {
+        display: block;
+    }
+
+    // input[type=color] must exist in the dom to work correctly
+    // styled so that they don't break layouts
+
+    #cp-app-whiteboard-pickers {
+        visibility: hidden;
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: -5;
+    }
+}
+
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index a5794b8d6..e3f7eacc4 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -1,9 +1,38 @@
 <!DOCTYPE html>
-<html class="cp">
+<html>
 <head>
+    <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
 </head>
 <body>
-
+<iframe id="sbox-iframe">
diff --git a/www/whiteboard/inner.html b/www/whiteboard/inner.html
new file mode 100644
index 000000000..076a78285
--- /dev/null
+++ b/www/whiteboard/inner.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/whiteboard/inner.js" data-main="/common/sframe-boot.js?ver=1.5" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+    </style>
+</head>
+<body class="cp-app-whiteboard">
+
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
new file mode 100644
index 000000000..b8ee7651c
--- /dev/null
+++ b/www/whiteboard/inner.js
@@ -0,0 +1,551 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    '/common/cryptpad-common.js',
+    '/common/cryptget.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/api/config',
+    '/common/common-realtime.js',
+    '/customize/pages.js',
+
+    '/customize/application_config.js',
+    '/common/common-thumbnail.js',
+    '/whiteboard/colors.js',
+
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+], function (
+    $,
+    Crypto,
+    TextPatcher,
+    Toolbar,
+    JSONSortify,
+    JsonOT,
+    Cryptpad,
+    Cryptget,
+    nThen,
+    SFCommon,
+    ApiConfig,
+    CommonRealtime,
+    Pages,
+    AppConfig,
+    Thumb,
+    Colors)
+{
+    var saveAs = window.saveAs;
+    var Messages = Cryptpad.Messages;
+
+    var APP = window.APP = {
+        Cryptpad: Cryptpad,
+        $: $
+    };
+    var Fabric = APP.Fabric = window.fabric;
+
+    var stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var toolbar;
+
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+
+    var andThen = function (common) {
+        /* Initialize Fabric */
+        var canvas = APP.canvas = new Fabric.Canvas('cp-app-whiteboard-canvas', {
+            containerClass: 'cp-app-whiteboard-canvas-container'
+        });
+        var $canvas = $('canvas');
+        var $controls = $('#cp-app-whiteboard-controls');
+        var $canvasContainer = $('canvas').parents('.cp-app-whiteboard-canvas-container');
+        var $pickers = $('#cp-app-whiteboard-pickers');
+        var $colors = $('#cp-app-whiteboard-colors');
+        var $cursors = $('#cp-app-whiteboard-cursors');
+        var $deleteButton = $('#cp-app-whiteboard-delete');
+        var $toggle = $('#cp-app-whiteboard-toggledraw');
+        var $width = $('#cp-app-whiteboard-width');
+        var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
+        var $opacity = $('#cp-app-whiteboard-opacity');
+        var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]');
+
+
+        // Brush
+
+        var brush = {
+            color: '#000000',
+            opacity: 1
+        };
+
+        var createCursor = function () {
+            var w = canvas.freeDrawingBrush.width;
+            var c = canvas.freeDrawingBrush.color;
+            var size = w > 30 ? w+2 : w+32;
+            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
+            var $ccanvas = $cursors.find('canvas');
+            var ccanvas = $ccanvas[0];
+
+            var ctx = ccanvas.getContext('2d');
+            var centerX = size / 2;
+            var centerY = size / 2;
+            var radius = w/2;
+
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+            ctx.fillStyle = c;
+            ctx.fill();
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = brush.color;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
+            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
+            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
+            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
+            ctx.strokeStyle = '#000000';
+            ctx.stroke();
+
+            var img = ccanvas.toDataURL("image/png");
+            $controls.find('.cp-app-whiteboard-selected > img').attr('src', img);
+            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
+        };
+
+        var updateBrushWidth = function () {
+            var val = $width.val();
+            canvas.freeDrawingBrush.width = Number(val);
+            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#cp-app-whiteboard-width-val').text(val + 'px');
+            createCursor();
+        };
+        updateBrushWidth();
+        $width.on('change', updateBrushWidth);
+
+        var updateBrushOpacity = function () {
+            var val = $opacity.val();
+            brush.opacity = Number(val);
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#cp-app-whiteboard-opacity-val').text((Number(val) * 100) + '%');
+            createCursor();
+        };
+        updateBrushOpacity();
+        $opacity.on('change', updateBrushOpacity);
+
+        var pickColor = function (current, cb) {
+            var $picker = $('<input>', {
+                type: 'color',
+                value: '#FFFFFF',
+                })
+            .on('change', function () {
+                var color = this.value;
+                cb(color);
+            }).appendTo($pickers);
+            setTimeout(function () {
+                $picker.val(current);
+                $picker.click();
+            });
+        };
+        var setColor = function (c) {
+            c = Colors.rgb2hex(c);
+            brush.color = c;
+            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
+            APP.$color.css({
+                'color': c,
+            });
+            createCursor();
+        };
+
+        var palette = AppConfig.whiteboardPalette || [
+            'red', 'blue', 'green', 'white', 'black', 'purple',
+            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
+        ];
+        $('.cp-app-whiteboard-palette-color').on('click', function () {
+            var color = $(this).css('background-color');
+            setColor(color);
+        });
+
+        APP.draw = true;
+        var toggleDrawMode = function () {
+            APP.draw = !APP.draw;
+            canvas.isDrawingMode = APP.draw;
+            $toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
+            if (APP.draw) { $deleteButton.hide(); }
+            else { $deleteButton.show(); }
+        };
+        $toggle.click(toggleDrawMode);
+
+        var deleteSelection = function () {
+            if (canvas.getActiveObject()) {
+                canvas.getActiveObject().remove();
+            }
+            if (canvas.getActiveGroup()) {
+                canvas.getActiveGroup()._objects.forEach(function (el) {
+                    el.remove();
+                });
+                canvas.discardActiveGroup();
+            }
+            canvas.renderAll();
+            APP.onLocal();
+        };
+        $deleteButton.click(deleteSelection);
+        $(window).on('keyup', function (e) {
+            if (e.which === 46) { deleteSelection (); }
+        });
+
+        var setEditable = function (bool) {
+            if (readOnly && bool) { return; }
+            if (bool) { $controls.css('display', 'flex'); }
+            else { $controls.hide(); }
+
+            canvas.isDrawingMode = bool ? APP.draw : false;
+            if (!bool) {
+                canvas.deactivateAll();
+                canvas.renderAll();
+            }
+            canvas.forEachObject(function (object) {
+                object.selectable = bool;
+            });
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
+        };
+
+        var saveImage = APP.saveImage = function () {
+            var defaultName = "pretty-picture.png";
+            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
+                if (!(typeof(filename) === 'string' && filename)) { return; }
+                $canvas[0].toBlob(function (blob) {
+                    saveAs(blob, filename);
+                });
+            });
+        };
+
+        APP.FM = common.createFileManager({});
+        APP.upload = function (title) {
+            var canvas = $canvas[0];
+            var finish = function (thumb) {
+                canvas.toBlob(function (blob) {
+                    blob.name = title;
+                    APP.FM.handleFile(blob, void 0, thumb);
+                });
+            };
+
+            Thumb.fromCanvas(canvas, function (e, blob) {
+                // carry on even if you can't get a thumbnail
+                if (e) { console.error(e); }
+                finish(blob);
+            });
+        };
+
+        var initializing = true;
+        var $bar = $('#cp-toolbar');
+        var Title;
+        var cpNfInner;
+        var metadataMgr;
+        var readOnly = false;
+
+        var config = {
+            readOnly: readOnly,
+            transformFunction: JsonOT.validate,
+            // cryptpad debug logging (default is 1)
+            // logLevel: 0,
+            validateContent: function (content) {
+                try {
+                    JSON.parse(content);
+                    return true;
+                } catch (e) {
+                    console.log("Failed to parse, rejecting patch");
+                    return false;
+                }
+            }
+        };
+
+        var addColorToPalette = function (color, i) {
+            if (readOnly) { return; }
+            var $color = $('<span>', {
+                'class': 'cp-app-whiteboard-palette-color',
+            })
+            .css({
+                'background-color': color,
+            })
+            .click(function () {
+                var c = Colors.rgb2hex($color.css('background-color'));
+                setColor(c);
+            })
+            .on('dblclick', function (e) {
+                e.preventDefault();
+                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
+                    $color.css({
+                        'background-color': c,
+                    });
+                    palette.splice(i, 1, c);
+                    config.onLocal();
+                    setColor(c);
+                });
+            });
+
+            $colors.append($color);
+        };
+
+        var first = true;
+        var updatePalette = function (newPalette) {
+            if (first || stringify(palette) !== stringify(newPalette)) {
+                palette = newPalette;
+                $colors.html('<div class="hidden">&nbsp;</div>');
+                palette.forEach(addColorToPalette);
+                first = false;
+            }
+        };
+        var updateLocalPalette = function (newPalette) {
+            updatePalette(newPalette);
+            var metadata = JSON.parse(JSON.stringify(metadataMgr.getMetadata()));
+            metadata.palette = newPalette;
+            metadataMgr.updateMetadata(metadata);
+            onLocal();
+        };
+        updatePalette(palette);
+
+        var makeColorButton = function ($container) {
+            var $testColor = $('<input>', { type: 'color', value: '!' });
+
+            // if colors aren't supported, bail out
+            if ($testColor.attr('type') !== 'color' ||
+                $testColor.val() === '!') {
+                console.log("Colors aren't supported. Aborting");
+                return;
+            }
+
+            var $color = APP.$color = $('<button>', {
+                id: "cp-app-whiteboard-color-picker",
+                title: Messages.canvas_chooseColor,
+                'class': "fa fa-square cp-toolbar-rightside-button",
+            })
+            .on('click', function () {
+                pickColor($color.css('background-color'), function (color) {
+                    setColor(color);
+                });
+            });
+
+            setColor('#000');
+
+            $container.append($color);
+
+            return $color;
+        };
+
+        var stringifyInner = function (textValue) {
+            var obj = {
+                content: textValue,
+                metadata: metadataMgr.getMetadataLazy()
+            };
+            // stringify the json and send it into chainpad
+            return stringify(obj);
+        };
+
+        var onLocal = config.onLocal = function () {
+            if (initializing) { return; }
+            if (readOnly) { return; }
+
+            var content = stringifyInner(canvas.toDatalessJSON());
+
+            APP.patchText(content);
+        };
+
+        config.onInit = function (info) {
+            readOnly = metadataMgr.getPrivateData().readOnly;
+
+            Title = common.createTitle({}, config.onLocal);
+
+            var configTb = {
+                displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
+                title: Title.getTitleConfig(),
+                metadataMgr: metadataMgr,
+                readOnly: readOnly,
+                realtime: info.realtime,
+                common: Cryptpad,
+                sfCommon: common,
+                $container: $bar,
+                $contentContainer: $('#cp-app-whiteboard-canvas-area')
+            };
+            toolbar = APP.toolbar = Toolbar.create(configTb);
+            Title.setToolbar(toolbar);
+
+            var $rightside = toolbar.$rightside;
+            var $drawer = toolbar.$drawer;
+
+            /* save as template */
+            if (!metadataMgr.getPrivateData().isTemplate) {
+                var templateObj = {
+                    rt: info.realtime,
+                    getTitle: function () { return metadataMgr.getMetadata().title; }
+                };
+                var $templateButton = common.createButton('template', true, templateObj);
+                $rightside.append($templateButton);
+            }
+
+            /* add an export button */
+            var $export = common.createButton('export', true, {}, saveImage);
+            $rightside.append($export);
+
+            common.createButton('savetodrive', true, {}, function () {})
+            .click(function () {
+                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
+                function (name) {
+                    if (name === null || !name.trim()) { return; }
+                    APP.upload(name);
+                });
+            }).appendTo($rightside);
+
+            var $forget = common.createButton('forget', true, {}, function (err) {
+                if (err) { return; }
+                setEditable(false);
+            });
+            $rightside.append($forget);
+
+            if (!readOnly) {
+                makeColorButton($rightside);
+            }
+
+            metadataMgr.onChange(function () {
+                var md = metadataMgr.getMetadata();
+                if (md.palette) {
+                    updatePalette(md.palette);
+                }
+            });
+        };
+
+        config.onReady = function (info) {
+            if (APP.realtime !== info.realtime) {
+                var realtime = APP.realtime = info.realtime;
+                APP.patchText = TextPatcher.create({
+                    realtime: realtime,
+                    //logging: true
+                });
+            }
+
+            var userDoc = APP.realtime.getUserDoc();
+            var isNew = false;
+            if (userDoc === "" || userDoc === "{}") { isNew = true; }
+
+            var newDoc = "";
+            if (userDoc !== "") {
+                var hjson = JSON.parse(userDoc);
+
+                if (hjson && hjson.metadata) {
+                    metadataMgr.updateMetadata(hjson.metadata);
+                }
+                if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
+                    (hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
+                     hjson.metadata.type !== 'whiteboard')) {
+                    var errorText = Messages.typeError;
+                    Cryptpad.errorLoadingScreen(errorText);
+                    throw new Error(errorText);
+                }
+            } else {
+                Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
+            }
+
+            Cryptpad.removeLoadingScreen();
+            setEditable(!readOnly);
+            initializing = false;
+            config.onRemote();
+
+            if (readOnly) { return; }
+            if (isNew) {
+                common.openTemplatePicker();
+            }
+        };
+
+        config.onRemote = function () {
+            if (initializing) { return; }
+            var userDoc = APP.realtime.getUserDoc();
+
+            var json = JSON.parse(userDoc);
+            var remoteDoc = json.content;
+
+            if (json.metadata) {
+                metadataMgr.updateMetadata(json.metadata);
+            }
+
+            // TODO update palette if it has changed
+
+            canvas.loadFromJSON(remoteDoc);
+            canvas.renderAll();
+
+            var content = canvas.toDatalessJSON();
+            if (content !== remoteDoc) { common.notify(); }
+            if (readOnly) { setEditable(false); }
+        };
+
+        config.onAbort = function () {
+            // inform of network disconnect
+            setEditable(false);
+            toolbar.failed();
+            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+        };
+
+        config.onConnectionChange = function (info) {
+            setEditable(info.state);
+            if (info.state) {
+                initializing = true;
+                Cryptpad.findOKButton().click();
+            } else {
+                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+            }
+        };
+
+        config.onError = onConnectError;
+
+        cpNfInner = common.startRealtime(config);
+        metadataMgr = cpNfInner.metadataMgr;
+
+        cpNfInner.onInfiniteSpinner(function () {
+            setEditable(false);
+            Cryptpad.confirm(Messages.realtime_unrecoverableError, function (yes) {
+                if (!yes) { return; }
+                common.gotoURL();
+            });
+        });
+
+        canvas.on('mouse:up', onLocal);
+
+        $('#clear').on('click', function () {
+            canvas.clear();
+            onLocal();
+        });
+
+        $('#save').on('click', function () {
+            saveImage();
+        });
+
+        Cryptpad.onLogout(function () { setEditable(false); });
+    };
+
+    var main = function () {
+        var common;
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                Cryptpad.addLoadingScreen();
+                $('body').append(Pages['/whiteboard/']());
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (/*waitFor*/) {
+            Cryptpad.onError(function (info) {
+                if (info && info.type === "store") {
+                    onConnectError();
+                }
+            });
+            andThen(common);
+        });
+    };
+    main();
+});
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index 17e929d9b..4c8a3887c 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -1,511 +1,41 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
 define([
-    'jquery',
+    '/bower_components/nthen/index.js',
     '/api/config',
-    '/bower_components/chainpad-netflux/chainpad-netflux.js',
-    '/bower_components/chainpad-crypto/crypto.js',
-    '/common/toolbar2.js',
-    '/bower_components/textpatcher/TextPatcher.amd.js',
-    'json.sortify',
-    '/bower_components/chainpad-json-validator/json-ot.js',
-    '/common/cryptpad-common.js',
-    '/common/cryptget.js',
-    '/whiteboard/colors.js',
-    '/customize/application_config.js',
-    '/common/common-thumbnail.js',
-    '/bower_components/secure-fabric.js/dist/fabric.min.js',
-    '/bower_components/file-saver/FileSaver.min.js',
-
-    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'less!/customize/src/less/cryptpad.less',
-    'less!/whiteboard/whiteboard.less',
-    'less!/customize/src/less/toolbar.less',
-], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
-    var saveAs = window.saveAs;
-    var Messages = Cryptpad.Messages;
-
-    var module = window.APP = { $:$ };
-    var Fabric = module.Fabric = window.fabric;
-
-    $(function () {
-    Cryptpad.addLoadingScreen();
-    var onConnectError = function () {
-        Cryptpad.errorLoadingScreen(Messages.websocketError);
-    };
-    var toolbar;
-
-    var secret = Cryptpad.getSecrets();
-    var readOnly = secret.keys && !secret.keys.editKeyStr;
-    if (!secret.keys) {
-        secret.keys = secret.key;
-    }
-
-    var andThen = function () {
-        /* Initialize Fabric */
-        var canvas = module.canvas = new Fabric.Canvas('canvas');
-        var $canvas = $('canvas');
-        var $controls = $('#controls');
-        var $canvasContainer = $('canvas').parents('.canvas-container');
-        var $pickers = $('#pickers');
-        var $colors = $('#colors');
-        var $cursors = $('#cursors');
-        var $deleteButton = $('#delete');
-
-        var brush = {
-            color: '#000000',
-            opacity: 1
-        };
-
-        var $toggle = $('#toggleDraw');
-        var $width = $('#width');
-        var $widthLabel = $('label[for="width"]');
-        var $opacity = $('#opacity');
-        var $opacityLabel = $('label[for="opacity"]');
-window.canvas = canvas;
-        var createCursor = function () {
-            var w = canvas.freeDrawingBrush.width;
-            var c = canvas.freeDrawingBrush.color;
-            var size = w > 30 ? w+2 : w+32;
-            $cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
-            var $ccanvas = $cursors.find('canvas');
-            var ccanvas = $ccanvas[0];
-
-            var ctx = ccanvas.getContext('2d');
-            var centerX = size / 2;
-            var centerY = size / 2;
-            var radius = w/2;
-
-            ctx.beginPath();
-            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
-            ctx.fillStyle = c;
-            ctx.fill();
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = brush.color;
-            ctx.stroke();
-
-            ctx.beginPath();
-            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
-            ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
-            ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
-            ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
-            ctx.strokeStyle = '#000000';
-            ctx.stroke();
-
-            var img = ccanvas.toDataURL("image/png");
-            $controls.find('.selected > img').attr('src', img);
-            canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
-        };
-
-        var updateBrushWidth = function () {
-            var val = $width.val();
-            canvas.freeDrawingBrush.width = Number(val);
-            $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
-            $('#width-val').text(val + 'px');
-            createCursor();
-        };
-        updateBrushWidth();
-
-        $width.on('change', updateBrushWidth);
-
-        var updateBrushOpacity = function () {
-            var val = $opacity.val();
-            brush.opacity = Number(val);
-            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
-            $('#opacity-val').text((Number(val) * 100) + '%');
-            createCursor();
-        };
-        updateBrushOpacity();
-
-        $opacity.on('change', updateBrushOpacity);
-
-        var pickColor = function (current, cb) {
-            var $picker = $('<input>', {
-                type: 'color',
-                value: '#FFFFFF',
-                })
-            // TODO confirm that this is safe to remove
-            //.css({ visibility: 'hidden' })
-            .on('change', function () {
-                var color = this.value;
-                cb(color);
-            }).appendTo($pickers);
-            setTimeout(function () {
-                $picker.val(current);
-                $picker.click();
-            });
-        };
-
-        var setColor = function (c) {
-            c = Colors.rgb2hex(c);
-            brush.color = c;
-            canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            module.$color.css({
-                'color': c,
-            });
-            createCursor();
-        };
-
-
-        var palette = AppConfig.whiteboardPalette || [
-            'red', 'blue', 'green', 'white', 'black', 'purple',
-            'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
-        ];
-
-        $('.palette-color').on('click', function () {
-            var color = $(this).css('background-color');
-            setColor(color);
-        });
-
-        module.draw = true;
-        var toggleDrawMode = function () {
-            module.draw = !module.draw;
-            canvas.isDrawingMode = module.draw;
-            $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
-            if (module.draw) { $deleteButton.hide(); }
-            else { $deleteButton.show(); }
-        };
-        $toggle.click(toggleDrawMode);
-
-        var deleteSelection = function () {
-            if (canvas.getActiveObject()) {
-                canvas.getActiveObject().remove();
-            }
-            if (canvas.getActiveGroup()) {
-                canvas.getActiveGroup()._objects.forEach(function (el) {
-                    el.remove();
-                });
-                canvas.discardActiveGroup();
-            }
-            canvas.renderAll();
-            module.onLocal();
-        };
-        $deleteButton.click(deleteSelection);
-        $(window).on('keyup', function (e) {
-            if (e.which === 46) { deleteSelection (); }
-        });
-
-        var setEditable = function (bool) {
-            if (readOnly && bool) { return; }
-            if (bool) { $controls.css('display', 'flex'); }
-            else { $controls.hide(); }
-
-            canvas.isDrawingMode = bool ? module.draw : false;
-            if (!bool) {
-                canvas.deactivateAll();
-                canvas.renderAll();
-            }
-            canvas.forEachObject(function (object) {
-                object.selectable = bool;
-            });
-            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
-        };
-
-        var saveImage = module.saveImage = function () {
-            var defaultName = "pretty-picture.png";
-            Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
-                if (!(typeof(filename) === 'string' && filename)) { return; }
-                $canvas[0].toBlob(function (blob) {
-                    saveAs(blob, filename);
-                });
-            });
-        };
-
-        module.FM = Cryptpad.createFileManager({});
-        module.upload = function (title) {
-            var canvas = $canvas[0];
-            var finish = function (thumb) {
-                canvas.toBlob(function (blob) {
-                    blob.name = title;
-                    module.FM.handleFile(blob, void 0, thumb);
-                });
-            };
-
-            Thumb.fromCanvas(canvas, function (e, blob) {
-                // carry on even if you can't get a thumbnail
-                if (e) { console.error(e); }
-                finish(blob);
-            });
-        };
-
-        var initializing = true;
-
-        var $bar = $('#toolbar');
-
-        var Title;
-        var UserList;
-        var Metadata;
-
-        var config = module.config = {
-            initialState: '{}',
-            websocketURL: Cryptpad.getWebsocketURL(),
-            validateKey: secret.keys.validateKey,
-            readOnly: readOnly,
-            channel: secret.channel,
-            crypto: Crypto.createEncryptor(secret.keys),
-            transformFunction: JsonOT.transform,
-        };
-
-        var addColorToPalette = function (color, i) {
-            if (readOnly) { return; }
-            var $color = $('<span>', {
-                'class': 'palette-color',
-            })
-            .css({
-                'background-color': color,
-            })
-            .click(function () {
-                var c = Colors.rgb2hex($color.css('background-color'));
-                setColor(c);
-            })
-            .on('dblclick', function (e) {
-                e.preventDefault();
-                pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
-                    $color.css({
-                        'background-color': c,
-                    });
-                    palette.splice(i, 1, c);
-                    config.onLocal();
-                    setColor(c);
-                });
-            });
-
-            $colors.append($color);
-        };
-
-        var metadataCfg = {};
-        var updatePalette = metadataCfg.updatePalette = function (newPalette) {
-            palette = newPalette;
-            $colors.html('<div class="hidden">&nbsp;</div>');
-            palette.forEach(addColorToPalette);
-        };
-        updatePalette(palette);
-
-        var makeColorButton = function ($container) {
-            var $testColor = $('<input>', { type: 'color', value: '!' });
-
-            // if colors aren't supported, bail out
-            if ($testColor.attr('type') !== 'color' ||
-                $testColor.val() === '!') {
-                console.log("Colors aren't supported. Aborting");
-                return;
-            }
-
-            var $color = module.$color = $('<button>', {
-                id: "color-picker",
-                title: Messages.canvas_chooseColor,
-                'class': "fa fa-square rightside-button",
-            })
-            .on('click', function () {
-                pickColor($color.css('background-color'), function (color) {
-                    setColor(color);
-                });
-            });
-
-            setColor('#000');
-
-            $container.append($color);
-
-            return $color;
-        };
-
-        config.onInit = function (info) {
-            UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
-
-            Title = Cryptpad.createTitle({}, config.onLocal, Cryptpad);
-
-            Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
-
-            var configTb = {
-                displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
-                userList: UserList.getToolbarConfig(),
-                share: {
-                    secret: secret,
-                    channel: info.channel
-                },
-                title: Title.getTitleConfig(),
-                common: Cryptpad,
-                readOnly: readOnly,
-                ifrw: window,
-                realtime: info.realtime,
-                network: info.network,
-                $container: $bar,
-                $contentContainer: $('#canvas-area')
-            };
-
-            toolbar = module.toolbar = Toolbar.create(configTb);
-
-            Title.setToolbar(toolbar);
-
-            var $rightside = toolbar.$rightside;
-
-            /* save as template */
-            if (!Cryptpad.isTemplate(window.location.href)) {
-                var templateObj = {
-                    rt: info.realtime,
-                    Crypt: Cryptget,
-                    getTitle: function () { return document.title; }
-                };
-                var $templateButton = Cryptpad.createButton('template', true, templateObj);
-                $rightside.append($templateButton);
-            }
-
-            var $export = Cryptpad.createButton('export', true, {}, saveImage);
-            $rightside.append($export);
-
-            Cryptpad.createButton('savetodrive', true, {}, function () {})
-            .click(function () {
-                Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
-                function (name) {
-                    if (name === null || !name.trim()) { return; }
-                    module.upload(name);
-                });
-            }).appendTo($rightside);
-
-            var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
-                if (err) { return; }
-                setEditable(false);
-                toolbar.failed();
-            });
-            $rightside.append($forget);
-
-            var editHash;
-
-            if (!readOnly) {
-                editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
-                makeColorButton($rightside);
-            }
-            if (!readOnly) { Cryptpad.replaceHash(editHash); }
-        };
-
-        // used for debugging, feel free to remove
-        var Catch = function (f) {
-            return function () {
-                try {
-                    f();
-                } catch (e) {
-                    console.error(e);
-                }
-            };
-        };
-
-        var onRemote = config.onRemote = Catch(function () {
-            if (initializing) { return; }
-            var userDoc = module.realtime.getUserDoc();
-
-            Metadata.update(userDoc);
-            var json = JSON.parse(userDoc);
-            var remoteDoc = json.content;
-
-            // TODO update palette if it has changed
-
-            canvas.loadFromJSON(remoteDoc);
-            canvas.renderAll();
-
-            var content = canvas.toDatalessJSON();
-            if (content !== remoteDoc) { Cryptpad.notify(); }
-            if (readOnly) { setEditable(false); }
-        });
-        setEditable(false);
-
-        var stringifyInner = function (textValue) {
-            var obj = {
-                content: textValue,
-                metadata: {
-                    users: UserList.userData,
-                    palette: palette,
-                    defaultTitle: Title.defaultTitle,
-                    type: 'whiteboard',
-                }
-            };
-            if (!initializing) {
-                obj.metadata.title = Title.title;
-            }
-            // stringify the json and send it into chainpad
-            return JSONSortify(obj);
-        };
-
-
-        var onLocal = module.onLocal = config.onLocal = Catch(function () {
-            if (initializing) { return; }
-            if (readOnly) { return; }
-
-            var content = stringifyInner(canvas.toDatalessJSON());
-
-            module.patchText(content);
-        });
-
-        config.onReady = function (info) {
-            var realtime = module.realtime = info.realtime;
-            module.patchText = TextPatcher.create({
-                realtime: realtime
-            });
-
-            var isNew = false;
-            var userDoc = module.realtime.getUserDoc();
-            if (userDoc === "" || userDoc === "{}") { isNew = true; }
-            else {
-                var hjson = JSON.parse(userDoc);
-                if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
-                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
-                    Cryptpad.errorLoadingScreen(Messages.typeError);
-                    throw new Error(Messages.typeError);
-                }
-            }
-
-            Cryptpad.removeLoadingScreen();
-            setEditable(true);
-            initializing = false;
-            onRemote();
-
-            /*  TODO: restore palette from metadata.palette */
-
-            if (readOnly) { return; }
-            UserList.getLastName(toolbar.$userNameButton, isNew);
-        };
-
-        config.onAbort = function () {
-            setEditable(false);
-            toolbar.failed();
-            Cryptpad.alert(Messages.common_connectionLost, undefined, true);
-        };
-
-        // TODO onConnectionStateChange
-        config.onConnectionChange = function (info) {
-            setEditable(info.state);
-            toolbar.failed();
-            if (info.state) {
-                initializing = true;
-                toolbar.reconnecting(info.myId);
-                Cryptpad.findOKButton().click();
-            } else {
-                Cryptpad.alert(Messages.common_connectionLost, undefined, true);
-            }
-        };
-
-        module.rt = Realtime.start(config);
-
-        canvas.on('mouse:up', onLocal);
-
-        $('#clear').on('click', function () {
-            canvas.clear();
-            onLocal();
-        });
-
-        $('#save').on('click', function () {
-            saveImage();
-        });
-    };
-
-    Cryptpad.ready(function () {
-        andThen();
-        Cryptpad.reportAppUsage();
-    });
-    Cryptpad.onError(function (info) {
-        if (info) {
-            onConnectError();
-        }
-    });
-
+    'jquery',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js'
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/whiteboard/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        SFCommonO.start();
     });
 });