I built my own operating system that runs in the browser (NebulaOS)
Most portfolios are a scroll of sections. Mine is an operating system. For Hack Club's WebOS 1 workshop I built NebulaOS, a personal OS that runs entirely in your browser. You boot it, open apps, drag windows around, lock the screen, and even type commands into a terminal to learn about me. 👉 Try it: https://maddulasriharsha.github.io/webos/ (no sign-in, no password) 👉 Code:…
I constructed my own browser-based operating system called NebulaOS for Hack Club's WebOS 1 workshop. This personal OS operates entirely within the browser, allowing users to boot it, open applications, manipulate windows, and even use a terminal for learning purposes. You can try it out at https://maddulasriharsha.github.io/webos/ (no sign-up required) and view the source code at https://github.com/maddulasriharsha/webos.
Key features of NebulaOS include:
- A window manager that supports dragging, resizing, minimizing, maximizing, and snapping to screen edges. Windows can even survive a page refresh.
- A variety of apps such as About Me, Files, Terminal, Paint, Notes, Calculator, Snake, and Settings.
- A shared virtual file system accessible through the Files app or through terminal commands like ls, cd, cat, and tree.
- Personalization options including 4 themes, a wallpaper picker, and the ability to upload your own image.
- Several OS touches like a boot sequence, lock screen, power menu, Spotlight search, a right-click desktop menu, and toast notifications.
- The core of NebulaOS is built using React, TypeScript, and Vite, with no external UI library. Each window is represented as an object in state, making it simple to manage and update.
The development process involved several lessons learned, such as:
- Avoiding the use of arrow functions without braces in useEffect hooks to prevent React from treating them as cleanup functions.
- Fixing issues with the Snake game's high score not incrementing by using a local counter within the effect instead of a stale closure.
- Correcting the window-snap preview positioning by lifting the preview out of the window component, as using backdrop-filter made it the containing block for position: fixed children.
- Ensuring windows opened within the viewport on smaller screens, such as phones, by clamping the new and restored windows to the viewport.
Future plans for NebulaOS include adding a music player, a mini browser app, and real multi-desktop workspaces. The OS is deployed using a small GitHub Actions workflow that builds the Vite app and publishes it to GitHub Pages on every push. A small gotcha to note is that the first run may fail until you set Settings → Pages → Source to GitHub Actions, which is a settings switch rather than a code problem. To ensure proper functionality from a subpath, Vite's base should be set to './'.
To learn more about creating your own OS, you can follow the WebOS workshop guide at https://jams.hackclub.com/batch/webOS. I would love to see what others create, so feel free to share your link in the comments.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
