css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

One day I thought I would recreate OS X as a way to learn random techniques, in a very unorthodox way. I realize this isn't a very original idea, it's just my take on it.

I attempted to follow the OS X Human Interface Guidelines as closely as possible for class naming conventions, while doing my best at keeping things "semantic", as if it was a regular website.

Flexbox made this thing possible with very little effort.

All windows and dock, are draggable, resizable and rearrangeable. Tabs are also rearrangeable. It's dependent on jQueryUI... for now.

You can consider your right click hijacked, as the right click context menu functions. Disable the function rightClickMenu(); around line 415 to get your mouse back so you can use your inspector :)

The icons came directly from the OS, at some point I'll probably make these into a sprite and optimize them...at some point.

The photos app (poorly) pulls my flickr feed. This is a good time to also mention that photography is not my strong suit..

Future goals: Add folder tree navigation to finder, create terminal app, finish Safari functionality (ability to use the address bar, tabs.. maybe bookmarks), contextual/system menus, system preferences.

There are TONS of bugs, I'm sure many that I haven't seen...

This Pen is a fork, but the parent Pen is now private.


  1. That is so awesome!

  2. I think i had a nightmare once where I had to do this. Which is a roundabout way of saying this is very rad, good work.

  3. A W E S O M E N E S S

  4. @mnahmias I think this is how it started for me.. haha. Thank you! :)

  5. Great effort man, always wanted to see something like this implemented.. now it's a pen :) totally sweet!

  6. Suuuuuuper doooope, you got mad skills yo

  7. @victorfreire thank you! your profile is awesome!

  8. "Wow this is really neat...wait can I actually...OMG I CAN OPEN STUFF AND...wait..is this window...IT'S DRAGGABLE, THIS IS AMAZING" -My Reaction

  9. Great job man! Fun to play around in and see how you tackled different features, kudos! 🏆

  10. @patrikhjelm Thank you! The goal was basically to literally tackle different features and see how I can solve them. Because eventually you just get tired of coding the same website layouts over and over.

  11. I tried to do to do Command + Q to quit out of an app... Needless to say it did not go well.

  12. @browles whoops! noted. I'll add support for CMD + Q in OS X 10.11.4. ;)

  13. This fuckin' impressive! Well done! I've considered doing the same thing with iOS one day.

  14. @croc thank you! That would be cool to see. I'll keep my eyes peeled ;)

  15. woooow this is so incredible. I really want to give this more than 3 hearts XD

  16. Wow. Just... wow. This is incredible :)

  17. Amazing! This, urgently, needs to be uploaded in a GitHub repository. With the help of the community, this could, really fast, become a full fledged web browser OS.

  18. @kostasx I've been thinking about it! Perhaps I'll throw it up on there this week. Thanks for the encouragement!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.