WEB is a minimalistic HTML, CSS, and JavaScript CodePen-like web editor that fits inside a bookmarklet.

bookmarklet

data:text/html, <div> <div contenteditable id=html placeholder=html></div> <div contenteditable id=css placeholder=css></div> <div contenteditable id=js placeholder=js></div> <iframe id=code frameborder=0></iframe> <button id=share>Copy Share Link</button> </div> <style> * { box-sizing: border-box; font-family: Consolas,monaco,monospace;} html, body { padding:0; margin:0; } body>div { display:flex; flex-wrap:wrap; height:100vh; width:100vw; } [contenteditable] { border:1px solid gray; width:calc(100vw / 3); height:40vh; } [contenteditable]:empty:before{ content:attr(placeholder); color: gray; display:block; } iframe { width: 100vw; height:60vh; } #share { position: fixed; bottom: 0; right: 0; } </style> <script> var d=document, t=function(el) { return el.textContent.replace(/\u00a0/g, " ")}, stage=code.contentWindow.document, compile=function(e) { stage.open(); stage.writeln(t(html)+"<style>"+t(css)+"</style>"+"<script>"+t(js)+"</s"+"cript>"); stage.close(); }, copy = function(str) { var el = d.createElement('textarea'); el.value = str; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; d.body.onload = compile; d.body.onkeyup = compile; share.onclick = function() {copy('data:text/html;base64,'+btoa(d.documentElement.outerHTML))}; </script>

WEB

# WEB
WEB is a recursive acronym. WEB stands for WEB Editor Bookmarklet.
WEB is a minimalistic HTML, CSS, and JavaScript CodePen-like web editor that fits inside a bookmarklet.

# Usage
Every time you edit the HTML, CSS, and JavaScript in the top three boxes, the result gets evaluated.

# Sharing
Click the share button in the bottom right to copy the contents of your WEB onto the clipboard for sharing.

web.html

<div> 
    <div contenteditable id=html placeholder=html></div>
    <div contenteditable id=css placeholder=css></div>
    <div contenteditable id=js placeholder=js></div>
    <iframe id=code frameborder=0></iframe>
    <button id=share>Copy Share Link</button>
</div>
<style> 
    * {
        box-sizing: border-box;
        font-family: Consolas,monaco,monospace
    }
    html, body { 
        padding:0; 
        margin:0; 
    } 
    body>div { 
        display:flex; 
        flex-wrap:wrap;
        height:100vh; 
        width:100vw;
    } 
    [contenteditable] {
        border:1px solid gray;
        width:calc(100vw / 3);
        height:40vh;
    }
    [contenteditable]:empty:before{
      content:attr(placeholder);
      color: gray;
      display:block;
    }
    iframe { 
        width: 100vw;
        height:60vh;
    } 
    #share {
        position: fixed;
        bottom: 0;
        right: 0;
    }
</style> 
<script> 
    var d=document,
        t=function(el) { return el.textContent.replace(/\u00a0/g, " ")},
        stage=code.contentWindow.document,
        compile=function(e) {
            stage.open(); 
            stage.writeln(t(html)+"<style>"+t(css)+"</style>"+"<script>"+t(js)+"</s"+"cript>"); 
            stage.close(); 
        },
        copy = function(str) {
            var el = d.createElement('textarea');
            el.value = str;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        };
        d.body.onload = compile;
        d.body.onkeyup = compile;
        share.onclick = function() {copy('data:text/html;base64,'+btoa(d.documentElement.outerHTML))};
</script>