By
@Riko
Kobayashi OS is a lightweight browser-based operating system featuring a multi-window desktop, customizable wallpapers, built-in apps, and a clean anime-inspired interface. Built with React, TypeScript, Bun, Tailwind CSS, and Zustand, it recreates a modern desktop experience entirely on the web.
Kobayashi OS — a web OS themed around Miss Kobayashi’s Dragon Maid.
I wanted to make one of the most feature-rich and polished web OS experiences possible, something that actually feels like you’re using a PC. And yeah, this is Kobayashi’s PC, so don’t be surprised if you find something interesting related to her.
The main thing I focused on was making everything feel connected, just like a real OS. Apps don’t just exist separately — Camera connects to Gallery and Files, downloads go into Files, Kanvas can save things to Files, widgets remember where you put them, and Kobayashi-chan can actually interact with the system.
Basically, it’s not just a collection of apps. It’s one big little OS.
I’m genuinely proud of how it turned out.
There are a lot of things packed into this project, and I think the best way to understand the amount of work that went into it is to actually explore it yourself.
That’s Kobayashi OS.
I started with the idea of making a web OS, but somewhere along the way it turned into this huge little world with its own apps, games, music, memories, AI, and way too many tiny details.
Hope you have fun exploring it.
1h 53m 58s logged
Polished the UI of the widgets, improved wallpaper customization, refined the app UX, resized the apps, added a bunch of new features, and made countless small tweaks across the OS. 
A lot has gone into this project, and I really hope it becomes the star project considering how much time I’ve poured into it. 🥹
Still more to come!
1h 34m 16s logged
Kobayashi-chan is here!
Chat, open apps, change settings. She remembers, reacts, and doesn’t mind a little flirting. :)
Major changes!! 
A summary of everything I’ve done over the past 5 days.
Lots of design work too—especially Figma stuff. StarDance doesn’t log my Figma hours though… too bad. 
10h 0m 59s logged
Damnn!! Been a while haven’t posted anything bout my Work!!!!!! 
9h 16m 31s logged
Added a lots of appppss!!! embeded few games, hackclub and typingtest.com … and Yeah added my own built apps (Json Lab , DevScope, and MoneyTrail)
3h 12m 36s logged
Another day on Kobayashi OS. Damn, I really turned the AI Assistant into what I actually wanted it to be. And yeah, now the Shorts app isn’t just some mere app with a icon sitting there — it actually has Shorts embedded hehe. And yeah… there’s a Kanvas app now too lol.
9h 52m 52s logged
Damn !! Been a while !! 
Yup was working on the assistant.. yeah which actually works!!! changed the architecture of ai chatbot and yeah its much better now !! and Yeah some more tweaks ongoing 
1h 14m 59s logged
Making the UI of music player nicer .. 
3h 58m 49s logged
BIG ALERT IN KOBAYASHI OS 
I SUCCESSFULLY BUILT AN AI ASSISTANT FOR MY WEB OS! 🎉 
It can actually understand commands and interact with the OS — opening apps, handling actions, and more.Another huge step for Kobayashi OS. I’m learning a LOT about AI while building this, and it’s honestly crazy seeing everything come together.
5h 15m 38s logged
Worked on the adding more apps.. with functionality and zero css hehe 
but yeah add it later currently working on a ai chat box on my project apps
3h 27m 1s logged
Today was more focused on research and architecture than coding, but I still made some solid progress. I perfected the widgets, made the right-click menu fully functional, and built a basic music player that’s already working. I’ll be focusing on the CSS and visual polish for the music player tomorrow. Overall, another productive day on Kobayashi OS. 
3h 31m 19s logged
Spent some more time working on the Widgets section 👀
Made the widgets draggable and closable only when the widgets menu the widgets top bar is being displayed.Also fixed up some CSS issues, added a right-click context menu, and added an Open option. So far, only one widget is actually openable; the rest will come later 😅
That’s enough UI work for today though — my shoulders and back are officially protesting. 💀
More to come!
1h 54m 23s logged
Update
Made a few solid improvements to the widget experience:
3h 29m 56s logged
A little update on the Widgets section
It’s already looking pretty cool , but I’m not quite done with it yet. 
There are still a few tweaks and some changes I want to make to how the widget system works under the hood. The goal is to make the whole experience feel cleaner, more flexible, and easier to build on as I keep adding more widgets.
For now, though… I’m pretty happy with how it’s coming together. 🚀More tweaks incoming. 
5h 49m 25s logged
Yahooooooo! Made some awesome progress! 
So happy to see it all coming together! 😄
🔥One step at a time, and the project is getting better and better! ✨ 💪
3h 34m 13s logged
Fixed a few bugs and made some nice improvements to the camera flow.
Now, the last captured photo is shown directly in the camera. Tap it, and the gallery opens with the image displayed at full width and height. From there, you can swipe through the rest of your photos.
Still have a few things I want to tweak in this flow, but the experience is already feeling much smoother.
Next up: widgets !!
7h 36m 42s logged
Been a while!
Added a working camera + gallery and implemented IndexedDB for storing captured photos.Honestly, the camera logic and IndexedDB were the biggest challenges since I knew nothing about them before this. Learned from internet resources, experimented, broke things, fixed them… and finally cracked it.
3h 30m 21s logged
I worked on improving the app bar behavior in Kobayashi OS. I added the Menu app icon to the apps bar whenever it’s opened, and also implemented position shifting for existing apps so they adjust automatically when a new app appears. Small interaction improvements, but they make the desktop feel more dynamic and consistent.
4h 7m 43s logged
Gallery is successfully made! Glad it turned out well.
The main challenge was the UI 🙄, but yeah, it now has Next/Previous and Back functionality. The selected image expands to the full width and height—just like we see in a proper gallery, without appearing in some corner or another section.
Overall, pretty happy with how it turned out!
7h 17m 40s logged
It’s been a while since my last update, but I’m happy to say Kobayashi OS is getting closer to the finish line! 🚀
Update:
More apps and features coming soon!🔥
1h 33m 8s logged
Worked on the menu app UI. It’s not fully functional yet, but I’ve added some basic functionality. I think it’s looking pretty good so far. This isn’t the final version, but the overall design will probably stay pretty close to this.
4h 48m 54s logged
Worked on the icon styling and UI, and implemented the app menu with close functionality. What ended up taking most of my time was a tiny bug—I was referencing a value as a string in one place while providing it as an object in another. It took me hours to spot the mismatch. Funny how the smallest errors can consume the most time.
3h 47m 58s logged
I’ve been working on the app’s UI in the maximized state.
Initially, the main challenges were around the overall workflow and approach. After experimenting with a few different directions, everything clicked and I landed on this design.
Next, I’ll be refining the icon styles further.
4h 7m 4s logged
I updated the minimize/maximize buttons so restored windows remember their previous position via the global store. Minimized apps now show a dot indicator at the bottom instead of the top. I also fixed a topbar bug where its z-index and absolute positioning caused maximized windows to get stuck underneath.
My main hurdle right now is UI scaling: the window container maximizes fine, but the internal components don’t resize with it. I’m weighing a few fixes to see which approach works best.
58m 23s logged
Just fixed the README
2h 5m 47s logged
Implemented minimize and restore with functionality and the maximize feat will be implemented in the 2nd version..
Kobayashi OS is a lightweight, anime-inspired Web Operating System built to bring a desktop-like experience to the browser. This first release focuses on a smooth window management system, allowing multiple instances of the same application, along with wallpaper, icon, and brightness customization. It uses React, TypeScript, Bun, Tailwind CSS, Zustand, and Local Storage to provide a persistent experience. The custom logo and launch banner were also designed specifically for this release.
Some applications currently contain placeholder alerts and are still under development, with more features and apps planned for future updates.
1h 11m 39s logged
Fixed the README and got it ready for the first official launch. The main issue was that the images and screenshots weren’t displaying correctly. Since it was a GitHub README, every small change required a commit and push just to verify whether the images loaded properly, which made the process slower than expected. Despite that, the final README turned out well and is now ready for launch.
3h 36m 45s logged
Added a notes app and added loading and welcome page .. Creating the logo was a bit hard :<
More feats and apps are coming!!
3h 32m 29s logged
Worked on the icons bar and added a new feature to the Settings app— you can now switch icon styles. Also saved wallpaper, brightness, and icon styles to localStorage.
Biggest challenges were digging through a massive icon file, organising them, and getting the UI right. At one point the icons just wouldn’t change… turns out I forgot to call the function. 😅
Moving on to more features and apps.
1h 28m 7s logged
Updated the app icons — they look so much better now. The old ones felt a bit off.
Funny disaster though: right after the change, nothing would open. Threw in some console.log()s… and the system crashed. Turns out the old icon was still being called in the main code, which made every window try to open. 😂
2h 18m 13s logged
Very small visible change this time. Added functionality to the settings sidebar. Yeah thinking bout the architecture!!
I did added different colors to my app background then removed it due to change in the architecture.
Working on something which looks like a small change 🥲 but needs a solid time and architecture 🫠 😮💨.
2h 20m 12s logged
Nothing!! Just refactored the UI of the Settings app. Added a side bar with the search bar.
The main headache was the Architecture!!
Damn!! My head hurts !! Still moving on.
I will update the full functionality of settings app next time !! (That’s my goal) . But yeah will add the other features later as the OS grows.
1h 46m 1s logged
Just dropped a fresh update for my web OS, Kobayashi OS!
It can now fully customize the desktop’s wallpaper with solid colors and gradients, all powered by a global store so everything stays smooth and in sync.
And Yo!! not gonna lie, building this took me on a absolute emotional roller coaster. I hit bug after bug, spent ages searching for answers, only to discover the culprits were… simple typos and missed JavaScript punctuation!! Classic! But hey, every bug fixed is a lesson learned.
I’m on a roll, so expect more updates super soon! Next up on the build list: making the Settings app feel like a real-deal OS and dropping some brand-new apps.
2h 38m 30s logged
I recently refactored our z-index management from local storage to a global system. Naturally, it brought a wave of visual bugs along with it—fix one, and four more pop up!After a solid debugging session with console.log(), everything is stable and working as expected. Next up: building out the Settings app to make it fully functional.
1h 34m 33s logged
Cleaned up the codebase, fixed a minor bug, and finally built a manual wallpaper changer.
Decided to use global state for it and… wow. It actually clicked. I was stuck for a minute overthinking how the workflow should look, but once I just started typing, it made total sense.
State management isn’t nearly as painful as I used to think.
Naturally, it didn’t work on the first try—the wallpaper wasn’t updating at all. Turns out I forgot a set of parentheses and had a stupid typo. Classic. Fixed that, and now it’s smooth sailing.
2h 47m 56s logged
I started moving my app state from local state to a global store using Zustand.
Right now, the open/close state of applications is managed globally, and next I’ll move the window dragging logic there as well.
The dragging system already works locally, so this is mostly a refactor to make the OS easier to scale.I also added a Settings app, although it doesn’t do anything yet. I decided to focus on getting the core OS functionality solid before adding more features and applications. Once that’s done, I’ll add things like manually changeable wallpapers and expand the Settings app.
As someone who’s still new to state management, I had no idea how to use a global store when I started. So before writing code, I spent time learning Zustand, understanding how global state works, and planning the architecture instead of jumping straight into implementation.There were plenty of moments where I got stuck. I had a few headaches trying to wrap my head around the concepts, but I kept going until it finally clicked.
No big visual changes, but I think I crossed a small milestone—one that’s going to make everything I build next much cleaner and easier to manage.
1h 12m 12s logged
Fixed a sneaky LocalStorage bug today! 🛠️
I initially put JSON.stringify directly inside useState, which completely crashed the app and prevented it from opening.
Rewrote the logic by moving JSON.stringify into a useEffect hook with tasks as a dependency. That got it working, but refreshing the page triggered a new bug: local storage was getting overwritten with an empty array.
I logged the data flow at every stage and caught the issue: useEffect was running on initial mount before state was restored. Added a simple length check (tasks.length > 0) before stringifying, and everything works perfectly now!
Always check your mount cycles! 🚀
6h 55m 50s logged
It’s been a while since my last update, so here is what I’ve been building and refining lately:
UI Refactoring:
Invested a significant amount of time redesigning and polishing the UI (still a work in progress, but looking much better!).
Window Management:
Added support for opening, minimizing, and closing windows.
Calculator App:
Cleaned up the codebase and added new functionality.
Task Tracking:
Added a strike-through feature for completed items in To-Dos App.
Next up: Implementing localStorage so task completions and window states persist across sessions.
1h 40m logged
Focus was the window manager.
Completed
Implemented dynamic z-index so the active window is always brought to the front.
Added window minimization.Implemented restore functionality from the Apps Bar.
Preserved window state while minimized instead of closing the application.
Challenge: Initially, minimizing a window removed it from the UI, but there was no way to bring it back because clicking the app icon simply ignored already opened apps.
Solution: Instead of treating minimized windows as closed, I introduced a minimized state for each window. The Apps Bar now checks whether an app is already open, minimized, or closed, and performs the appropriate action—open, restore, or bring it to the front. This keeps the component mounted and preserves its state while hidden.
The desktop now supports opening, closing, dragging, minimizing, restoring, and proper window stacking. With these core interactions in place, the next milestone is maximize/restore, followed by window resizing and a global state refactor with Zustand.
2h 31m 25s logged
Continued building the window management system for Kobayashi OS.
Implemented draggable application windows from scratch using React mouse events (mousedown, mousemove, mouseup) with proper drag offsets for smooth movement. Refactored the layout to introduce a dedicated desktop area, keeping windows constrained within the workspace instead of the entire page.
Spent most of the session debugging positioning logic, DOM measurements, and boundary constraints. The draggable window system is now functional and forms the foundation for upcoming features like minimize, maximize, focus (z-index), and Zustand-powered window state management.
1h 21m 24s logged
Continued refining the Kobayashi OS interface.Finalized the built-in app icons and continued shaping the application dock and overall desktop structure to make the OS feel more like a complete desktop environment.Built the first built-in application—a basic calculator—with support for standard arithmetic operations. This marks the beginning of adding functional utilities to the OS.The focus remains on establishing a solid foundation before expanding into more advanced applications and features.
1h 18m 10s logged
Continued working on the Kobayashi OS layout.
The overall design is still evolving, and I’m experimenting with different arrangements before settling on a final structure.
I added icons for the built-in applications and started shaping how the interface should feel.
No application logic yet—right now the focus is on finding the right layout before building the functionality.
1h 38m logged
DevDock is no longer just a collection of developer tools—it’s being redesigned into Kobayashi OS , a browser-based operating system built for developers.
This update focuses on restructuring the application’s architecture, replacing the original layout with an OS-inspired interface, and laying the groundwork for applications, tools, and a desktop-like workflow.
The goal is to create a cohesive environment where developer utilities feel like native applications rather than separate web pages.The transition is still in progress, but the foundation for Kobayashi OS is now replacing the original DevDock vision.
3h 31m 37s logged
DevLog 1 — DevDock
After wrapping up DevScope, I wanted to build something that solves a problem.
Introducing DevDock — a workspace that brings essential developer tools together in one place, reducing context switching and making common development tasks faster and more convenient.I’ve already finished the initial landing page. It took far more CSS work than I’m used to, but I’m happy with where it stands for now. Of course, nothing is ever truly finished—I’ll keep refining it if future feedback or better ideas come up.This is only the beginning. The real work starts now as I begin building the tools that will make DevDock genuinely useful.
