The Smallest, Simplest Office Apps Right in Your Browser

0

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>
image 6 600x180 - The Smallest, Simplest Office Apps Right in Your Browser

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;">
image 7 600x126 - The Smallest, Simplest Office Apps Right in Your Browser

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>
image 8 600x392 - The Smallest, Simplest Office Apps Right in Your Browser

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>
image 9 - The Smallest, Simplest Office Apps Right in Your Browser

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>
image 10 600x271 - The Smallest, Simplest Office Apps Right in Your Browser

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here