HN Explorer

Show HN: I wrote a "web OS" based on the Apple Lisa's UI, with 1-bit graphics (alpha.lisagui.com)

516 points by ayaros ↗ HN
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.

57 comments

[ 4.6 ms ] story [ 57.7 ms ] thread
mysterydip
I'm on mobile so only able to try a couple things, but impressed with how responsive it is! Thanks for sharing
subjectsigma
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.
smokel
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.)

rgovostes
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.

(Edit: Menus staying open after one click was a welcome improvement that I think came much later.)

hackyhacky
How did you research this? Do you own a Lisa?
ayaros
The Lisa doesn't have square pixels, so the canvas is scaled to be 1.5x as high as it is wide. This generally looks fine on high-dpi displays, because there's technically twice as much space to render with (pixels are 2px wide by 3px high). However, things will look distorted on a lower resolution display (where pixels are 1px wide by 1.5px high). That's just a compromise I made when designing this.

The good news is, if you have a large enough low-dpi display, and you make the window big enough, the automatic integer scaling settings will kick in, and the pixels themselves will be displayed larger. This can be forced via the preferences app (under the display options). If you screw this up, then restart LisaGUI while holding the shift key to reset the scaling settings.

EDIT: Unrelated to this, there are a couple minor bugs with PWAs on iOS relating to the positioning of the canvas. These can be resolved by rotating your device to a different orientation and then rotating it back to the original position... but this is annoying.

EDIT 2: To close windows, just double click the icon in the titlebar! This "collapses the window back into an icon."

fitsumbelay
very cool, plus so much tasty design and functional tips that spark inspiration. I really love that look of aliased type that still reaches for that calligraphic look that's _just_ beyond the GUI's capacity to display. Nostalgia shmacking me in the taste buds with this one ...
londons_explore
> minor bugs with PWAs on iOS

There are major bugs with PWA's, and I suspect most of them stem from the tens of billions of dollars per year of app store revenue that would be undermined if PWA's actually became useful...

revskill
Cool but color hurt my eyes.
JSR_FDED
This is amazing! Thanks for the excellent memories!
jonathanlydall
Very cool.

Something I recommend doing for the mouse cursor on mobile is to make it work like Microsoft’s Remote Desktop on iOS (possibly Android too, but I’m an iPhone user so don’t know for sure) where the cursor isn’t where you tap on the screen, but you kind of pan anywhere on the screen which proportionally moves the cursor which is somewhere not under your finger. It’s a bit hard to explain, you just need to try using RDP on Microsoft’s free Windows App on your mobile device.

Avshalom
> Author's note: I pronounce the letters in GUI separately. Why would you ever pronounce it "gooey?" Please don't do that. Just don't.

Solidarity!

[deleted]
(comment deleted)
sfblah
So I played the puzzle game on this Lisa and it appears unsolvable to me, which sort of surprised me. Has anyone else given it a shot?

Here's a picture of how far I got: https://imgur.com/a/QhnnC4X

Cieric
This is pretty cool and it's surprising how well it works on mobile. I think the shuffle puzzle game has a bug where it can generate unsolvable puzzles. I ran into a parity issue. I solved it with the blank in the upper left but got no response from the game so I don't believe that was the intended solution.

Also checked with an online solver and it verified that there was no solution.

rustystump
These are the kinds of show hn I live for. Tasty vanilla js + learning about an esoteric "Lisa GUI" well before my time. Bravo!

I would love to see a breakout style game or something in the demo/examples but that is my inner child speaking.

DigiEggz
Love both the project and the landing page design. Thank you for creating this!!
leakycap
I never realized it, but I'd never even used an emulated Lisa - until today! Thanks for bringing life back to this old platform and letting us relive the thinking that led off the GUI. Cheers.
hoistbypetard
I never spent a lot of time using Lisa, but I got several opportunities to kick the tires as a Mac repair tech in the early 90s. I even fixed a Lisa or two, and converted one to a "Mac XL". You've captured the UI really nicely, and it was fun to click around. Good job!