Featured image of post Share Code for a Temporary Web Notepad Without Frontend or Backend

Share Code for a Temporary Web Notepad Without Frontend or Backend

This temporary rich text notepad requires no front-end, no back-end, and no server deployment—just one line of code does the trick. Here’s the code: Copy it into your browser…

This temporary rich text notepad has no frontend, no backend, and does not require server deployment—just one line of code will do.

The code is as follows:

1
data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmJtemhwLmNvbSBlZGl0IG1lPC9odG1sPg==

Simply copy it into the browser’s address bar and run it. The notepad allows you to paste images, text, and even web pages.

Share Code for a Temporary Web Notepad Without Frontend or Backend The V2 developers have offered even more functionalities:

For saving and loading local files:

1
data:text/html;charset=utf-8,<script>r=()=>f?.text().then(x=>f.type='text/html'?e.innerHTML=x:e.innerText=x)</script><body><div id=t><button onclick="e.innerHTML=''">🚮<button onclick="o.showPicker()">📂<button onclick="a.href=`data:text/${p.checked?'plain':'html'};charset=utf-8,${encodeURIComponent (p.checked?e.innerText:e.innerHTML)}`;a.click()">💾</button><input id=o hidden type=file onchange="f=o.files[0];r()"><label><input type=checkbox id=p onchange="e.contentEditable=p.checked?'plaintext-only':'true'">plaintext</label><a hidden id=a download=draft></div><div id=e contenteditable ondrop="f=event.dataTransfer.files[0];r();return false"><style>html{height:100%;display:flex;color-scheme:dark light}body{flex:1;flex-direction:column;font-family:system-ui}#t{position:sticky;padding:8px;inset: 0 0 auto;gap:4px}#t,button,body{display:flex}#e{flex:1;padding:8px;font-size:150%}</style>

For a web drawing board:

1
data:text/html,<canvas id=v><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>

For a real-time HTML, JS, and CSS renderer:

1
data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%;}body{margin:0;}textarea{width: 33.33%;font-size:18px;padding:0.5em}</style><textarea placeholder="HTML"id="h"></textarea><textarea placeholder="CSS"id="c"></textarea><textarea placeholder="JS"id="j"></textarea><iframe id="i"></iframe><script>document.querySelectorAll("textarea").forEach((t)=>t.addEventListener("keydown",function(t){var e,s;"Tab"==t.key&&(t.preventDefault(),e=this.selectionStart,s=this.selectionEnd,this.value=this.value.substring(0,e)+"  "+this.value.substring(s),this.selectionStart=this.selectionEnd=e+1)}))</script></body>

For an online spreadsheet feature:

1
data:text/html,<table id=t><script>z=Object.defineProperty,p=parseFloat;for(I=[],D={},C={},q=_=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),i=0;i<101;i++)for(r=t.insertRow(-1),j=0;j<27;j++)c=String.fromCharCode(65+j-1),d=r.insertCell(-1),d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,q()},get=_=>{v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(p(v))?v:p(v);with(D)return eval(v.slice(1))},a={get},z(D,f.id,a),z(D,f.id.toLowerCase(),a),f))(document.createElement`input`)))</script><style>#t{border-collapse:collapse}td{border:1px solid gray;text-align:right}input{border:none;width:4rem;text-align:center}</style>

This temporary web notepad is very useful when you need to jot down functions temporarily without the need for saving. Its main selling point is simplicity!

For more features, visit: https://github.com/zserge/awfice


Licensed under CC BY-NC-SA 4.0