DEV Community

loading...
Cover image for Windows 11, but for Web

Windows 11, but for Web

Piyush Suthar
just another 17y/o trying to figure out how to use rust and typescript. tweets mostly about typescript, preact and rust.
・1 min read

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 (35)

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
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
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
mohammadraufzahed profile image
Mohammad Raufzahed

This is awesome man.
keep going

Collapse
piyush profile image
Piyush Suthar Author

Thank you!!

Collapse
irvv17 profile image
irvv17

Wow. that's awesome :O

Collapse
irvv17 profile image
irvv17

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
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
piyush profile image
Piyush Suthar Author

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

Collapse
geobrodas profile image
Georgey

Your killing it 💪🔥

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
coderlg profile image
LG

This. Is. Cool.

Collapse
piyush profile image
Piyush Suthar Author

Yeah! 😬

Collapse
victorreissp profile image
VictorReisSp

very nice 🙂 ❤️

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
hi2kavin profile image
hi2kavin

Really good ... Nice work

Collapse
piyush profile image
Piyush Suthar Author

Thank you!

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
metacoding profile image
Meta Coding

Brilliant!

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!!

Collapse
zakiazfar profile image
Mohd Ahmad

😍😍😍 Love it man

Collapse
piyush profile image
Piyush Suthar Author

Thanks!!

Collapse
zdoten profile image
z.En

This is pretty awesome, I prefer the macOS one.

Collapse
piyush profile image
Piyush Suthar Author

Yeah! Me too 😬

Collapse
brocks1445 profile image
Brocks1445

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

Collapse
jaskaransingh4704 profile image
Jaskaran Singh

Great Work

Collapse
gruce profile image
Hassan Alkhalidi

Wow incredible job!

Collapse
hasanmn profile image
hasanmn

Cool!!!

Collapse
piyush profile image
Piyush Suthar Author

Yeah!! Thanks!

Collapse
yazhiniyanms profile image
yazhiniyanMS

nice