Data URL for an in-browser editor

Scratchpad

data:text/html;charset=utf-8,%3Chtml%3E%3Chead%3E%0A%20%20%3Ctitle%3E~%3C/title%3E%0A%20%20%3Cmeta%20http-equiv=%22Content-Type%22%20content=%22text/html;%20charset=utf-8%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20html%20%7B%0A%20%20%20%20%20%20background:%20%23000;%0A%20%20%20%20%7D%0A%0A%20%20%20%20label%20%7B%0A%20%20%20%20%20%20color:%20%23fff;%0A%20%20%20%20%20%20padding-right:%201em;%0A%20%20%20%20%7D%0A%0A%20%20%20%20textarea,%20input%20%7B%0A%20%20%20%20%20%20background:%20%23224;%0A%20%20%20%20%20%20border:%200;%0A%20%20%20%20%20%20color:%20%23fff;%0A%20%20%20%20%7D%0A%0A%20%20%20%20iframe%20%7B%0A%20%20%20%20%20%20background:%20%23fff;%0A%20%20%20%20%7D%0A%0A%20%20%20%20textarea,%20iframe%20%7B%0A%20%20%20%20%20%20width:%2040%25;%0A%20%20%20%20%20%20height:%2042%25;%0A%20%20%20%20%20%20margin:%200.5%25%201%25;%0A%20%20%20%20%20%20resize:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20input%20%7B%0A%20%20%20%20%20%20width:%2084%25;%0A%20%20%20%20%20%20margin-bottom:%200.5%25;%0A%20%20%20%20%7D%0A%20%20%3C/style%3E%0A%3C/head%3E%0A%3Cbody%3E%0A%20%20%3Cdiv%3E%0A%3Cdiv%3E%0A%20%20%20%20%3Clabel%20for=%22encoded%22%3EEditor%3C/label%3E%3Cinput%20id=%22encoded%22%3E%0A%20%20%3C/div%3E%0A%20%20%3Cdiv%3E%0A%20%20%20%20%3Clabel%20for=%22pagedata%22%3EContent%3C/label%3E%3Cinput%20id=%22pagedata%22%3E%0A%20%20%3C/div%3E%0A%20%20%3Cdiv%3E%0A%20%20%20%20%3Clabel%20for=%22isrc%22%3EEmbed%3C/label%3E%3Cinput%20id=%22isrc%22%3E%0A%20%20%3C/div%3E%0A%20%20%3C/div%3E%0A%20%20%3Ctextarea%20id=%22html%22%20placeholder=%22HTML%22%3E%3C/textarea%3E%0A%20%20%3Ctextarea%20id=%22css%22%20placeholder=%22CSS%22%3E%3C/textarea%3E%0A%20%20%3Ctextarea%20id=%22js%22%20placeholder=%22JavaScript%22%3E%3C/textarea%3E%0A%20%20%3Ciframe%20id=%22iframe%22%20srcdoc=%22%3Cstyle%3E%3C/style%3E%3Cscript%3E%3C/script%3E%22%3E%3C/iframe%3E%0A%20%20%3Cscript%3E%0A%20%20%20%20location.hash.replace(/%5E%23/,%20'').split('-')%0A%20%20%20%20%20%20.map(part%20=%3E%20atob(part))%0A%20%20%20%20%20%20.forEach((part,%20index)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20if%20(index%20===%200)%20html.value%20=%20part;%0A%20%20%20%20%20%20%20%20if%20(index%20===%201)%20css.value%20=%20part;%0A%20%20%20%20%20%20%20%20if%20(index%20===%202)%20js.value%20=%20part;%0A%20%20%20%20%20%20%7D);%0A%0A%20%20%20%20const%20update%20=%20()%20=%3E%20%7B%0A%20%20%20%20%20%20const%20src%20=%20html.value%20+%20'%3Cstyle%3E'%20+%20css.value%20+%20'%3C%5C/style%3E%3Cscript%3E'%20+%20js.value%20+%20'%3C%5C/script%3E';%0A%20%20%20%20%20%20iframe.srcdoc%20=%20src;%0A%20%20%20%20%20%20isrc.value%20=%20%22%3Ciframe%20src=%5C%22data:text/html;charset=utf-8,%22%20+%20encodeURI(src).replace(/%23/g,%20'%2523')%20+%20%22%5C%22%20/%3E%22;%0A%20%20%20%20%20%20pagedata.value%20=%20%22data:text/html;charset=utf-8,%22%20+%20encodeURI(src).replace(/%23/g,%20'%2523')%0A%0A%20%20%20%20%20%20const%20hash%20=%20btoa(html.value)%20+%20'-'%20+%20btoa(css.value)%20+%20'-'%20+%20btoa(js.value);%0A%0A%20%20%20%20%20%20location.hash%20=%20hash;%0A%20%20%20%20%20%20encoded.value%20=%20%22data:text/html;charset=utf-8,%22%20+%0A%20%20%20%20%20%20%20%20encodeURI(document.children%5B0%5D.outerHTML).replace(/%23/g,%20'%2523')%20+%0A%20%20%20%20%20%20%20%20%22%23%22%20+%20hash;%0A%20%20%20%20%7D%0A%0A%20%20%20%20document.onchange%20=%20update;%0A%20%20%20%20update();%0A%20%20%3C/script%3E%3C/body%3E%3C/html%3E#--