LisaGUI is a "web OS" - a website that mimics the look, feel, and functionality of an operating system. More bluntly, it's a giant JavaScript program which fully recreates the Apple Lisa's user interface from scratch (to the best of my ability). The Lisa was Apple's first computer with a graphical user interface (known as the Lisa Office System, or "LOS"). More information about it can be found in the history section of this site.
LisaGUI is not intended to be a completely perfect recreation. There are a number of features I have added (or "backported") from newer UIs like that of the Macintosh. One could say it's a slight evolution of the Lisa's interface; a "what-if" scenario showing what LOS might have looked like had development continued a bit further into the future. It also serves as a bit of a personal playground for me to experiment with the UI.
LisaGUI is NOT an emulator. It does NOT use any of the Lisa's source code, and does NOT emulate the Lisa's hardware. For full Lisa emulation (and the most historically accurate experience possible), try LisaEm - see the links page for more info.
Right now, I don't have an extensive user manual for LisaGUI beyond a couple of read-me documents included with the system. In the future I will be adding more detailed end-user documentation as soon as I get the time to write it! On this page, you will find an overview of the project and some simple technical details about its inner workings.
Quick tip: To close a window, double-click its title bar icon!
Overview
LisaGUI lets you create, open, and edit files within its filesystem using a document-oriented workflow. The Lisa uses "stationery pads" which are template files used to create new documents. Instead of opening an application to create a file, you simply double-click a stationery pad to "tear off" a piece of "stationery" (a new document).
The great thing about the Lisa's workflow is any existing file or folder can also be turned into a stationery pad to be used as an easily-duplicated template for future documents or projects.
Something that sets the Lisa apart is its desktop isn't a separate folder on the disk. Instead, it's a temporary place where files can be placed. "Setting aside a file" puts it onto the desktop, but doesn't actually remove it from its existing location (where you will see a grayed-out silhouette of the icon). Files already on the desktop can be instantly placed back into their original locations using the "save and put away" menu command in the file menu. Naturally, you can also just drag a file onto any visible folder window (or folder icon) to move it to that location.
Manage a virtual desktop: LisaGUI's built in filesystem lets you save your work locally to your browser's IndexedDB storage space.
Notable New Features
While LisaGUI does its best to accurately depict the Lisa experience, it also aims to be an improvement over the original Lisa Office System. I've added a number of new features to it - some are inspired by modern OSs, others draw inspiration from older versions of the Macintosh System Software, and some I thought of myself. Additional features include:
"Sticky" menus: the now-ubiquitous behavior where a menu stays open after it is single-clicked, and then closes when a menu item is clicked (or if the user clicks out of the menu). On LOS, menus had to be held open by holding down the mouse button, and menu options were selected by dragging the mouse down and letting go at the desired option. Most modern OSs support both of these behaviors.
Auto-disabled scroll buttons: LOS's scrollbar buttons didn't originally provide any feedback to let users know there was no room within the window to scroll.
Bulging wastebasket icon: The icon of LisaGUI's wastebasket (the equivalent of the "Trash" on the Macintosh or the Windows "Recycle Bin") bulges outwards to indicate when items have been placed inside of it. LOS did not change the appearance of the wastebasket.
Icon themes: These change the icons of disks and some of the default apps. Some are based on alternate OSs that can be run on a Lisa, like Mac OS and GEM.
Built-in support for creating custom icon labels: This lets you draw labels on top of your files and folders, just as you might do in a real office setting. To add a label, select a document or folder and choose "Attributes of" from the File menu. This feature was never native to LOS or macOS, but it's similar to the icon editor in ResEdit, and appeared in Andy Hertzfeld's "Macintosh Servant," an early alternative shell for the Mac.
A menubar clock: This wasn't a feature included on the Lisa, and didn't exist on the Mac until it was added by several different extensions.
Customizable desktop patterns: LOS only supported a halftone gray pattern, but LisaGUI lets you draw your own 8x8 1-bit desktop patterns, just like in early versions of the Mac System Software. You may also choose from a variety of presets sourced from LOS, Mac OS, Windows, and elsewhere. Personally, I think these patterns are important historical artifacts in their own right worthy of being preserved and presented with dignity.
Customizable color palettes: The default palette mimics the tint of the Lisa's CRT (which, of course, was a monochrome CRT and had no actual color palette). Other palettes take inspiration from a variety of sources, including various types of CRTs and flat-screen displays.
"Twiggy" Mac titlebar text borders: An option to change the borders around the text in the title bar to those used by certain pre-release versions of the Macintosh System Software.
Dark mode...? Built-in support for inverting the screen.
Customizable time formats: Choose from a 12-hour clock, a 24-hour clock, military time, French decimal time, and hexadecimal time.
Customizable storage unit formats: The Lisa used "blocks" as a unit of information (one block equaling 512 bytes). By default, LisaGUI shows file sizes using metric units (such as kilobytes) but also allows you to use blocks, as well as binary units (such as kibibytes).
Customize your workspace: Decorate your office to suit your tastes. Choose from a variety of color palettes and icon themes, and invert the screen if you wish. Pick from one of the many desktop patterns, or draw your own!
Technical Info
LisaGUI is almost entirely vanilla Javascript. Aside from Gulp.js, which I use as a simple build tool to produce a minified JS file, no third party libraries or frameworks are utilized. LisaGUI contains no code from the Lisa Office System's source code (or any code written by Apple), and doesn't utilize any component of any emulator, like LisaEm or IDLE. It contains no AI-generated code.
The entirety of LisaGUI's user interface is computed in Javascript and rendered to a single canvas element. Aside from the canvas, and a few other elements which serve various purposes, the document object model is not used at all. As a result, all the user interface components had to be coded from scratch in JS; they aren't simply reskinned HTML nodes. Instead of the DOM, I wrote my own hierarchical system for organizing objects. All elements in the UI exist within the hierarchy, the root of which is the desktop.
This isn't a CSS skin; CSS is mainly used to position and style the canvas. It's also used to style the "bootloader" UI which resembles the Lisa's hardware test screen. This UI is displayed while the script loads, and is used as a fallback if JS is disabled (where it takes on the appearance of a Lisa startup error).
To render screen elements onto the canvas, I wrote what I hesitate to call a graphics engine. It's a bit naively written (and thus slow) and really needs a rewrite or reimplementation, perhaps using WebGL or some other system utilizing the GPU. However, it works, and has full support for 1-bit blending modes. The system is heavily optimized; regions of the display are only drawn when the position of an object changes, and only the objects placed within the rectangular bounds of the region are included in those calculations.
Label your icons: Personalize your documents by drawing labels on them! Never have trouble finding that really important file in a cluttered folder. This feature was
not originally in LOS.
Each screen element has two 1-bit channels - one for image data, and one for an alpha channel. Each channel functions independently of the other, and there are several object classes used to store channel data. There are two bitmap classes - one of them uses bit-masking to store data as compactly as possible. In other classes, the image can be generated programmatically. One of the classes displays tiled bitmap patterns. Another stores pixel data using a set of x/y points (instead of a 2D array), allowing for compact storage of large images with minimal amounts of information.
LisaGUI has its own (very basic) typesetting system. Similar to the Lisa (and early versions of the Mac System software) one or more text styles can be applied to each character. This includes standard styles such as bold and italic, but also outlined and shadowed text. There are variety of ways to format paragraphs: text alignment and line spacing are adjustable, and the engine supports formatting text along left-to-right or right-to-left directionalities.
For storing data, LisaGUI uses an IndexedDB-based file system. In keeping with the diegetic nature of this project (in the spirit of the Lisa's stronger adherence to the desktop metaphor), each IndexedDB database corresponds to a single "hard disk." Multiple disks can be added to the system. The system also supports "RAM disks" which are just JS objects stored in memory.
Future Plans
LisaGUI is in alpha. It works, but requires more polish and still lacks important features. While I can make no promises about what I will have time to do in the future, there are some more apps I plan to write for LisaGUI. I certainly didn't make a web OS just for people to use a word processor! The next major app I will be working on is a paint program, in the vein of MacPaint or MS Paint. I'm a huge MacPaint fan so going forwards this will be a priority. Please note: nothing listed here is actually guaranteed to happen!
Near-term plans:
LisaPaint, as previously mentioned
A Calculator app with paper tape
Disk repair/maintenance functions, as well as a general cleanup of the disk code
A general cleanup of the OS code, and maybe even an actual task-scheduler
Printing to image files, actual printers, and (possibly) PDFs
Simple sound capabilities
Additional fonts, and a font editor application
UI animations
Additional desk accessories, games, and other demo apps
Longer-term plans:
Language localization support
Independently scrollable window sub-panes: A wonderful Lisa feature I will be adding when I get the chance
Rewrite/refactor of the graphics code to a faster system
Additional apps similar to those from the Lisa 7/7 suite, such as a spreadsheet program or a project manager app
An online multiplayer Xerox Mazewar clone
A simple web-browser app
Handling of arbitrarily formatted HTML/XML text when pasting from the system
A file-editing app similar to ResEdit on Mac OS
Recommended System Requirements
Software:
Javascript must be enabled. If you have noscript, you'll have to disable it on this domain.
The latest version of
Firefox,
Chrome, or
Safari. Support for older versions and other browsers isn't guaranteed.
LisaGUI will prompt you to "install" itself; it just wants permission before making a new IndexedDB database. This also installs a service worker for offline use.
Hardware:
A high-DPI display running at native resolution is recommended. Low-DPI displays will show scaling artifacts. The ideal native resolution is at least 1440 x 1092px but this is NOT a requirement.
A mouse and keyboard. The UI isn't optimized for touchscreens.
Phones and small tables are NOT recommended at this time! They just aren't big enough to comfortably display the entire interface.
License information and additional credits
LisaGUI's JavaScript code is © 2023-2025 Andrew Yaros. Any and all trademarks within are properties of their respective owners. All other rights reserved. LisaGUI's minified code is not licensed for any usage outside the functionality it provides to lisagui.com as an embedded script file while accessed directly through the site in a browser (or as a PWA) for personal, noncommercial usage. LisaGUI is offered as-is with no warranty. All other copying, reuse, or modification of LisaGUI's code for any reason in any other context by anyone other than its author (Andrew Yaros) is prohibited. LisaGUI's code, its author, and this website are not affiliated with Apple Inc. or any of its subsidiaries. The use of this code in the creation or training of any kind of large language model or artificial intelligence software system is strictly prohibited. LisaGUI's unminified code is not currently public, and is not licensed for any kind of usage whatsoever.
The "StartupFrom" font used for the 404 error page (and as a fallback font for when JS is disabled) was created by Rebecca G. Bettencourt. The license can be found
here. More information can be found at the
Kreative Korporation website.
Right now, there's no formalized bug reporting system for LisaGUI. If you encounter an issue, message me on Bluesky or Mastodon (or reply to one of my posts there), or email me using the link at the very bottom of this page.
