Show HN: I wrote a "web OS" based on the Apple Lisa's UI, with 1-bit graphics

48 ayaros 12 7/6/2025, 6:32:55 PM alpha.lisagui.com ↗
https://lisagui.com/info.html

This is a web OS I wrote in vanilla JS that looks like the Apple Lisa Office System (1983-85), with other contemporaneous influences and additional improvements and features. It's currently in alpha and isn't remotely bug free. I had been holding off on posting this here until it was somewhat presentable and useful. Please note; the Lisa conforms more literally to the desktop metaphor than most modern GUIs - some of the important differences are mentioned in the readme.

This is a complete recreation of the UI in JS; it all renders to a single canvas element. It's not a CSS theme, and not an emulator ported to JS. None of the code is written by Apple. I'll be happy to elaborate more in the comments, but the short version is the entire UI is defined outside the DOM using JS objects. Thus, every interface element - menus, windows, controls, and even typefaces - was recreated from scratch. There are no font files - I wrote my own typesetting system, which supports combining multiple text styles and generates new glyph variants on the fly.

Many of the technical decisions I made were motivated by a desire to have this look the same in every browser. That's harder to do with the DOM and CSS, and why I moved as much logic as I could to JS. Also, the only part of the project outside of vanilla JS and standard web APIs is the Gulp toolkit, which I'm using as a minification/build tool. No vibe coding was used to make this!

This is based on a UI from the 80s, and won't work well on your phone. If you insist on running it that way, turn on trackpad mode in the touchscreen settings panel of the preferences app. For best results, install it as a PWA (add it to your home screen). Also there are some odd Android bugs; the native touchscreen keyboard is currently broken, and there's an issue with the cursor when dragging windows.

I realize there's not a whole lot to do within LisaGUI right now; I've got a big list of additional features and apps I'll be adding in the future. I've been working on this project for a while, and I'm eager to hear people's feedback and answer questions about it.

Comments (12)

rgovostes · 1m ago
The shadow text style and fatbits editor in the Preferences app really took me back. Other than a lack of close buttons on windows, it's remarkable that you can strip away 40 years of UX "innovation" and the result is still productive and intuitive.
iluvfossilfuels · 1m ago
Awww coool - you get one of the medals for "most useless achievements, respective only for stupid dorks"

Enjoy!

mysterydip · 20m ago
I'm on mobile so only able to try a couple things, but impressed with how responsive it is! Thanks for sharing
smokel · 16m ago
Perhaps I'm doing something wrong, but the line widths in the characters are quite inconsistent. For example the two l's in "install" have different widths. This makes something pretty amazing look slightly disappointing.

(Tested in Firefox and Chrome on desktop.)

ayaros · 7m ago
I'll take a closer look at this. Might be a kerning issue.
Jonovono · 19m ago
Crazy cool, wow!
subjectsigma · 18m ago
Just clicking around I accidentally highlighted the background element or something, which caused the whole page to turn blue. Then no matter what I clicked I couldn't get it to un-select. Making everything blue didn't ruin the experience or anything but it was a little annoying. Safari 18.5 (20621.2.5.11.8) and Google Chrome 138.0.7204.93.
ayaros · 1m ago
Unless the canvas element itself is being selected - which would be a big oversight on my part, that's the default color palette, which is a blue tint to mimic the Lisa's CRT. Right now, it isn't applied until the settings start loading.

If this is causing any confusion I might put a priority on saving this setting in a way where it can be applied immediately as the page is loaded.

rgovostes · 7m ago
I had the same reaction, but it's intentional. Open the Preferences app, check Decorate Desktop, and then select something other than Pale Blue Dot from the color palette picker.
humptybumpty · 11m ago
Same on iphone. Maybe a swipe or something and it selected the whole page blue

Edit: doing nothing will do the autoselect. Odd

pvg · 10m ago
I think that tint is intended to emulate the look of the Lisa CRT.
ayaros · 5m ago
Yes, that's correct. There's a variety of palettes to choose from in the preferences!