Customize your computer screen with HTML and JavaScript

Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you customize your desktop screen using HTML/CSS/JavaScript.

It started as a demo for macdriver, but over the last week or so I've been making a standalone version. 90% of that time was playing around with it while trying to make demos.

Could this bring back the computing aesthetic of personalized MySpace pages and Geocities sites all over again? No?? ...maybe? Well, either way, I'm happy to share a tool for people to experiment once again.

Topframe is a fullscreen overlay that displays a special webpage served from your home directory. Editing the page source and hitting save will magically update your screen with nearly anything you can do in the browser.

Yes, it has Tailwind built-in, as well as trusty old jQuery. However, you can drop anything you want in the topframe directory to use. Or hotlink, why not? This isn't WEBSCALE, it's just on your computer. Your personal computer.

Getting Started with Topframe

Topframe is still very early. The whole project is less than 400 lines of Go. You'll also need a Mac, but it'll be cross-platform by 1.0.

Refer to the README for more details, but installing with Homebrew is as easy as:

$ brew install progrium/taps/topframe

Then you can just run topframe and it'll run the overlay webpage with some crazy demo content. SOrry. The important thing to notice is the new menu bar icon 🔲 and menu:

This is where you actually control Topframe, but there's not much to it. You can enable/disable (hide), make it interactive (by default mouse events just pass through), and quickly get to the source directory.

Clicking Show Source and opening the index.html file with your favorite editor, you can just wipe out all that garbage I put on your screen. HOWEVER, you can also look through it and see what you can find before blowing it away. There might be some cool ideas or features tucked away in there.

What could this be used for?

As the demo attempts to communicate, there is a LOT you can do with Topframe. For those streaming on Twitch (like me), you can use this as an alternative to doing overlays in OBS. Or, with some resourcefulness, you could make skins for all your windows. If anybody remembers the OS X Dashboard that they removed, you could make your own (better) version of that.

Or you could make some kind of screen Tamagotchi like Dogz from the 90s:

The only real limit is ... yourself.

What Next

Again, this is an early project, but it's also a mostly contributor-driven project. I'm going to keep focusing on tools to make stuff like this (including what'll make it cross-platform), so it'll be up to you all to really make this a real thing. For example, it could probably really use a global keyboard shortcut to toggle hiding or interactivity.

If you have questions, I'm watching the GitHub discussions so feel free to post there. Otherwise, have fun and consider sponsoring my work!