A TypeScript + React playground that recreates the macOS desktop right inside your browser
Live Demo: https://macos.dawidolko.pl
- About
- Project Structure
- Star History
- Getting Started
- Screenshots
- Changelog
- Credits
- Contributing
- License & Author
macos.dawidolko.pl is an open-source portfolio / desktop simulator that mirrors the look-and-feel of modern macOS (Big Sur β Sonoma).
Built with React, TypeScript, Vite, UnoCSS and Zustand for state-management, it delivers buttery-smooth animations, draggable windows, launchpad apps, a dynamic dock, and light/dark appearance that respects the system preference. ππ₯οΈ
.
βββ .github/ # GitHub Actions & issue templates
βββ .husky/ # Pre-commit hooks
βββ assets/ # Icons, wallpapers, fonts
βββ img/ # Marketing images
βββ logo/ # SVG/PNG logo variants
βββ markdown/ # Blog posts / docs (rendered in-app)
βββ music/ # Demo audio files
βββ public/ # Static assets served at /
βββ screenshots/ # Light / dark previews
βββ src/ # Application code
β βββ components/ # Re-usable React components
β βββ containers/ # Window / desktop shells
β βββ stores/ # Zustand stores
β βββ theme/ # UnoCSS & design tokens
β βββ utils/ # Helpers
β βββ main.tsx # Entry point
β βββ vite-env.d.ts # Type helpers
βββ .editorconfig
βββ .eslintrc
βββ .gitattributes
βββ .gitignore
βββ .nojekyll
βββ CNAME
βββ LICENSE
βββ README.md # You are here!
βββ index.html # Vite HTML shell
βββ manifest.json # PWA manifest
- Git β https://git-scm.com
- Node.js 18 + β https://nodejs.org
- pnpm (recommended) β
npm i -g pnpm
# 1. Clone
git clone https://github.com/dawidolko/Macos-Simulaing-System-GUI
cd Macos-Simulaing-System-GUI
# 2. Install deps
pnpm install # or npm i / yarn
# 3. Start the dev server with HMR
pnpm devpnpm build # outputs static files to /dist| Light mode | Dark mode |
|---|---|
![]() |
![]() |
- 2023-06-26 β FaceTime UI polish & bug-fixes
- 2023-06-25 β Added Typora markdown editor (powered by Milkdown)
- 2021-12-05 β Battery API integration + full functional-component refactor
See CHANGELOG.md for the complete list.
- Apple macOS, Monterey, Catalina iconography
- macOS Icon Gallery
file-icon-cliby @sindresorhus
This project originally drew inspiration from the amazing Ubuntu/Windows simulators linked below.
Bug reports, feature suggestions and pull requests are welcome & appreciated!
# Fork β clone β create a branch
git checkout -b feat/amazing-feature
# Commit & push
git commit -m "Add amazing feature"
git push origin feat/amazing-feature
# Open a PR πPlease include screenshots or GIFs when UI is involved.
-
License: MIT β free to use, fork and remix!
-
Author: Dawid Olko
- Portfolio: https://dawidolko.pl
- GitHub: https://github.com/dawidolko
- LinkedIn: https://www.linkedin.com/in/dawidolko/
Crafted with β, π§ and a healthy dose of macOS nostalgia.

