We have a full-blown Office Suite that is available on our desktop computers. We also have a web version of it that is capable enough for most of our work. But how about little things like a quick note, a simple table spreadsheet, or a presentation slider? Is there a simpler version of Office for that?
Let me introduce the world’s smallest Office Suite, which’s free, web-based, and can be run offline without the internet.
Word
Simply paste in the following code in the browser’s address bar, and you can quickly get a notepad for notes taking.
data:text/html,<html contenteditable>
The nice thing about it is that you can print or save your notes in HTML format.
Feel the font boring? Let’s apply a different font and color.
data:text/html,<html contenteditable style="font-family:cablibri;font-size:14pt;color:green;">
PowerPoint
Here is the code you can copy in the address bar.
data:text/html,<style>@page{size: 6in 8in landscape;}</style><body><script>d=document;for(i=0;i<50;i++)d.body.innerHTML+='<div style="position:relative;width:90%;padding-top:60%;margin:5%;border:1px solid silver;page-break-after:always;"><div contenteditable style="outline:none;position:absolute;right:10%;bottom:10%;left:10%;top:10%;font-size:5vmin;"></div></div>';d.querySelectorAll("div>div").forEach(e=>e.onkeydown=e=>{n=e.ctrlKey&&e.altKey&&e.keyCode-49,x=["formatBlock","formatBlock","justifyLeft","justifyCenter","justifyRight","outdent","indent","insertUnorderedList"][n],y=["<h1>","<div>"][n],x&&document.execCommand(x,!1,y)})</script>
It creates 50 blank slides for you to fill in with hotkeys to apply headings, change alignments. For example, press Ctrl+Alt+1 to make the text a heading H1, Ctrl+Alt+2 to turn the text back in normal, 3…5 change the alignment, and 6, 7 to adjust the indentation, or 8 to start a list.
Again, you can print the result, or save it.
Excel
The code is getting longer…but still like nothing comparing to the real app.
data:text/html,<table id="t"><script>for(I=[],D={},C={},calc=()=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),t.style.borderCollapse="collapse",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.style.border="1px solid gray",d.style.textAlign="right",d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.style.border="none",f.style.width="4rem",f.style.textAlign="right",f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,calc()},get=()=>{let v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(parseFloat(v))?v:parseFloat(v);with(D)return eval(v.substring(1))},Object.defineProperty(D,f.id,{get:get}),Object.defineProperty(D,f.id.toLowerCase(),{get:get}),f))(document.createElement("input"))))</script>
Not as sleek as the real Excel app, but not bad either.
Bonus: Quick Drawing
This will be extremely useful if you have a touch-screen equipped Windows 10 computer. Fire up in a browser and draw or write using your finger.
data:text/html,<canvas id="v"><script>d=document,d.body.style.margin=0,f=0,c=v.getContext("2d"),v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,x=e=>e.clientX||e.touches[0].clientX,y=e=>e.clientY||e.touches[0].clientY,d.onmousedown=d.ontouchstart=e=>{f=1,e.preventDefault(),c.moveTo(x(e),y(e)),c.beginPath()},d.onmousemove=d.ontouchmove=e=>{f&&(c.lineTo(x(e),y(e)),c.stroke())},d.onmouseup=d.ontouchend=e=>f=0</script>
All these ideas work perfectly in browsers like Chrome, Firefox, as well as Microsoft’s new Edge Chromium. If you like any of them, bookmarking them in your bookmark bar will make them more useful.
And again, full credits go to
And again, full credits go to the guy behind these ideas.