A fully functional Ubuntu-style desktop environment running entirely in your browser.
Unlike mockup UIs or simple component demos, WebUbuntu is a real working desktop:
- 🪟 Window Manager: Drag, resize, minimize, maximize, and Alt+Tab between windows
- 📁 Simulated Filesystem: Full in-memory file tree with directories, files, permissions, and path navigation
- 💻 Working Terminal: Bash-like shell with
cd,ls,mkdir,cat,pwd,clear, and more - 🗂️ File Manager: Browse folders, create files/folders, rename, and navigate breadcrumbs
- 🎮 30+ Built-in Apps: From productivity tools to games to dev utilities
Open it in any modern browser, no installation needed.
┌─────────────────────────────────────────┐
│ 🐧 WebUbuntu ─ □ ✕ │
├─────────────────────────────────────────┤
│ 🖥️ Desktop │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Terminal │ │ File │ │ Snake │ │
│ │ $ _ │ │ Manager │ │ 🐍 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ 📎 Dock: 🗂️ 💻 📝 🧮 🌐 🎵 🎮 |
└─────────────────────────────────────────┘
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Icons | Lucide React |
| State Management | Custom Zustand-like store |
| Deployment | Vercel |
| Shortcut | Action |
|---|---|
Super (Windows/Meta) |
Toggle App Launcher |
Ctrl + Alt + T |
Open Terminal |
Super + D |
Minimize All Windows |
Alt + Tab |
Switch Windows |
- File Manager, Terminal, Text Editor, Calculator, System Settings, System Monitor, Archive Manager
- Calendar, Notes, Todo List, Clock, Spreadsheet, Document Viewer, Reminders, Contacts, Password Manager, Whiteboard
- Web Browser, Email, Chat, Weather, RSS Reader, FTP Client, Network Tools
- Music Player, Video Player, Image Viewer, Photo Editor, Voice Recorder, Screen Recorder, Media Converter
- Minesweeper, Snake, Tetris, Tic-Tac-Toe, 2048, Sudoku, Chess, Memory Game, Pong, Solitaire, Flappy Bird
- Code Editor, JSON Formatter, Regex Tester, Markdown Preview, Git Client, API Tester, Base64 Tool, Color Palette
- Drawing, Color Picker, Image Gallery, ASCII Art
# Clone the repo
git clone https://github.com/asimayazmrd0987-glitch/Web_Linux.git
cd Web_Linux
# Install dependencies & start dev server
cd Web_Based_Ubuntu_Linux/app
npm install
npm run devThen open the URL printed by Vite (usually http://localhost:5173).
cd Web_Based_Ubuntu_Linux/app
npm run buildThe static site will be generated in Web_Based_Ubuntu_Linux/app/dist/.
I wanted to understand how desktop environments work under the hood — window management, event handling, filesystem abstractions, and UI state management by building one myself.
This project started as a learning exercise and grew into a fully interactive web desktop that anyone can try instantly, with zero setup.
Web_Based_Ubuntu_Linux/app/src/
├── apps/ # All built-in applications
│ ├── Terminal.tsx
│ ├── FileManager.tsx
│ ├── Snake.tsx
│ └── ...
├── components/ # Desktop shell components
│ ├── WindowFrame.tsx # Draggable, resizable window chrome
│ ├── WindowManager.tsx # Renders all open windows
│ ├── Dock.tsx # Bottom dock bar
│ ├── TopPanel.tsx # Top status bar
│ └── AppLauncher.tsx # Super-key app grid
├── hooks/
│ └── useOSStore.ts # Global desktop state (windows, focus, etc.)
├── types/
│ └── index.ts # TypeScript types
├── App.tsx # Root desktop shell
└── main.tsx # Entry point
- Persist filesystem to
localStorageso files survive refreshes - Add a real backend shell via WebSocket (connect to actual Linux container)
- Multi-user sessions with login screen
- Custom themes and wallpaper support
- File drag-and-drop between apps
MIT — feel free to fork, extend, or use as inspiration for your own projects.
Built with 💜 by asimayazmrd0987-glitch