DEV Community

Cover image for Windows 11, but for Web
Piyush Suthar
Piyush Suthar

Posted on

Windows 11, but for Web

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).

image

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 :)

GitHub logo 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

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!

Known Issues

  • Blur not working in Firefox browser.

Solution:-

  1. Open about:config in your firefox…

Demo

Light Mode Start Menu
Start Menu (Light Mode)
Dark Mode Start Menu
Start menu (Dark Mode)

Widget Light Mode
Widget (Light Mode)
Widget Dark Mode
Widget (Dark mode)

image
Windows (Light Mode)

image
Context Menu

End

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

Discussion (58)

Collapse
cristhos profile image
Br CRISTAL DIBWE

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

Collapse
piyush profile image
Piyush Suthar Author

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

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
bentechcoder profile image
Benjamin Lebron

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! :)

Collapse
piyush profile image
Piyush Suthar Author

Yeah, this project doesn't have any practical use case but it's fun and it also made me improve my knowledge about css.

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
merichard123 profile image
Richard

This is so cool!!! You are so talented! Keep up the great work!!

Collapse
piyush profile image
Piyush Suthar Author

Thank you!!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
imcoderlg profile image
LG

This. Is. Cool.

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
imcoderlg profile image
LG

That's great man! Sorry for the late reply, it's great!

Thread Thread
rehman0 profile image
Rehman

Thank you

Collapse
piyush profile image
Piyush Suthar Author

Yeah! 😬

Collapse
mohammadraufzahed profile image
Mohammad Raufzahed

This is awesome man.
keep going

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Thank you!!

Collapse
irvingcaamal17 profile image
Irving Caamal

Wow. that's awesome :O

Collapse
irvingcaamal17 profile image
Irving Caamal

You can even drag an drop the windows, pretty cool.

Collapse
piyush profile image
Piyush Suthar Author

There's much more you can do with it 😋.

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
mrzenw profile image
MrZenW

This is pretty awesome, I prefer the macOS one.

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Yeah! Me too 😬

Collapse
zakiazfar profile image
Mohd Ahmad

😍😍😍 Love it man

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
metacoding profile image
Meta Coding

Brilliant!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!!

Collapse
geobrodas profile image
Georgey

Your killing it 💪🔥

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
victorreissp profile image
VictorReisSp

very nice 🙂 ❤️

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
jadenguitarman profile image
Jaden Baptista

Awesome! Some time back I made a similar thing for mac: jaden.baptista.dev

Collapse
piyush profile image
Piyush Suthar Author

So cool!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
codinghusi profile image
Gerrit Weiermann

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 :)

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
piyush profile image
Piyush Suthar Author

Ohh thanks! I had never heard of it before. Lemme take a look at it 😋

Collapse
hi2kavin profile image
hi2kavin

Really good ... Nice work

Collapse
piyush profile image
Piyush Suthar Author

Thank you!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
hasanmn profile image
hasanmn

Cool!!!

Collapse
piyush profile image
Piyush Suthar Author

Yeah!! Thanks!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
brocks1445 profile image
Brocks1445

Hey, It's Nice But, If It Can Run Apps, It Will Be INCRDEBLE!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
yazhiniyanms profile image
yazhiniyanMS

nice

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
gruce profile image
Hassan Alkhalidi

Wow incredible job!

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9

Collapse
jaskaransingh4704 profile image
Jaskaran Singh

Great Work

Collapse
rehman0 profile image
Rehman

Please check out mine
Demo: window-11.netlify.app/
Post Link : bit.ly/3wuZxL9