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)
More
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:configin your firefox browser. - Search for
layout.css.backdrop-filter.enabled…
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 (59)
Nice achievement, I think your approach can be used for something else.
Thanks!
Yeah! I have made this reusable so that I can reuse the same code for any other web os...
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
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! :)
Yeah, this project doesn't have any practical use case but it's fun and it also made me improve my knowledge about css.
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
This is so cool!!! You are so talented! Keep up the great work!!
Thank you!!
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
This is awesome man.
keep going
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Thank you!!
This. Is. Cool.
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
That's great man! Sorry for the late reply, it's great!
Thank you
Yeah! 😬
Wow. that's awesome :O
You can even drag an drop the windows, pretty cool.
There's much more you can do with it 😋.
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Your killing it 💪🔥
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Thanks!!
very nice 🙂 ❤️
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Thanks!!
Oh that's awesome!
It reminds me of OS.JS thats also a web ui with the goal to actually work as a desktop engine :)
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Ohh thanks! I had never heard of it before. Lemme take a look at it 😋
This is pretty awesome, I prefer the macOS one.
Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9
Yeah! Me too 😬