My very own WebOS

Devlog #1: Booting Up - Building a Custom Window Manager & Desktop Environment from Scratch

Today marks the official first boot of my WebOS project. I’ve had coding experiences before but not to this extent. I’ve never gone outside of challenges on stuff like Codewars and aside from some small side projects, I’ve never actually built a big project like I am now, so this’ll be a new experience.

I’m trying to build a full OS that runs in the Web Browser directly using HTML, CSS, and Vanilla JavaScript. It acts like an actual operating system, like windows for example, but the only difference is the way it looks, it’s identity and that it runs in your web browser.

Over the past few hours, I changed the project from a static layout into a fully interactive environment. Here is a breakdown of the core engine and features that I currently built.

1. The Custom Window Manager
   The hardest part of making an OS is handling window states. I built a universal Drag-and-Drop engine with dynamic Z-Index management.

The Problem: Windows would get stuck behind each other, or the browser would lose track of the mouse if the user dragged too fast or threw the window off-screen, so i wouldn’t be able to drag it back.

The Solution: I implemented an event elegation system attached to the document root, calculating mouse offsets relative to the title bars. This means wherever the mouse moves, the title bars move to keep that offset difference the same, which is essentially what the drag and drop function is. I also engineered physical constraints so windows can never be dragged out of the viewport.

1. The Desktop Environment
   To not make seem like this is just a website, I completely changed the browser’s default behavior.
   I Implemented double-click event listeners for desktop icons and then overrode the native browser right-click menu (e.preventDefault()) and built a custom OS context menu this makes it feel more unique.

2. Core Applications
   Notepad: A fully resizable text editor using CSS flexbox so the typing area automatically expands with the window.
   Calculator: Quite self-explanatory. Engineered the math logic from scratch.

Settings (NASA API): Built a customization menu that toggles a global 12hr/24hr clock state, and fetches real-time data from NASA’s APOD API to dynamically change the desktop wallpaper based on the NASA Picture of the Day.

What’s Next?
The UI feels like an OS, but it lacks permanence. Next on the roadmap: File Management. I’ll be engineering a system to actually save the data typed into the Notepad so it survives page refreshes. Also, I want to create a web browser with actual internet access to really bring that OS feeling. That’s all I have planned out.

p.s. I’ve attached some pictures of my website below - hope you like it :)

Stay tuned.