Create account

DEV Community

Piyush Suthar

Posted on Jul 22, 2021

Windows 11, but for Web

#react #css #showdev #javascript

Hello!

Recently I started creating a clone of Windows 11 for web in Preact. My main focus while creating this clone was performance. It must work smoothly even on a low end device (like mine).

The UI isn't complete yet. I'll be working on it in my free time. My focus while creating this is maintainability and Performance. Anyone with a basic level react knowledge should easily understand the code.

Here's the stack I used:-

Preact (For smooth runtime performance)
ViteJS (For smooth development performance)
CSS modules (I know frameworks would have been better. But I wanted some control and Performance Babe!)
- TypeScript (Obviously :)

Try it out here -> Windows 11 Web

I'll recommend you to contribute or atleast check the code. You'll learn something :)

PiyushSuthar / Windows-11-Web

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Windows 11 Web

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Try Windows 11 Web:- win11.vercel.app

This isn't ready yet, and who knows when it will XD

Why?

Microsoft launched their newest version of Windows and I was very excited to test it out. So I made this!

BTW, This project was inspired by Macos Web

Stack

Preact (Now Million Js)
ViteJS

Acknowledgement

Thanks to Sunrit Jana for writing an awesome description for this project! and to Manivannan for sharing icons with me!

And to all the Super-Awesome contributors!

(tbh, finding suitable icons is the most difficult part of making this project)

Some similar, but super awesome projects!

Windows XP Web by sh1zuku
MacOS Web by Puru Vijay
Ubuntu Web by Vivek Patel
Windows 11 web, but with no-code by Manivannan

Solution:-

Open about:config in your firefox browser.
Search for layout.css.backdrop-filter.enabled…

View on GitHub

Demo

Start Menu (Light Mode)

Start menu (Dark Mode)

Widget (Light Mode)

Widget (Dark mode)

Windows (Light Mode)

Context Menu

End

You can follow me on twitter to follow the progress @piyushsthr.

Top comments (38)

Br CRISTAL DIBWE • Jul 22 '21

Nice achievement, I think your approach can be used for something else.

Piyush Suthar • Jul 23 '21

Thanks!
Yeah! I have made this reusable so that I can reuse the same code for any other web os...

Benjamin Lebron • Jul 25 '21

I'm going to be honest. I'm not sure what "practical" use this website but then again it wasn't built for "practical" is was built for fun and that's why I love this project. A million thumbs up for you and this project! :)