Playground OS

A browser-based desktop environment built with React and TypeScript.

Playground OS recreates the experience of a lightweight desktop operating system directly inside your browser.

How to Run Playground OS

1. Download or clone the project

Clone the repository:

git clone https://github.com/Mathias-Simonsen/Playground-OS.git

Enter the project folder:

cd Playground-WebOS

You can also download the project as a ZIP file, extract it, and open the extracted folder in Visual Studio Code.

2. Install the required packages

Open a terminal inside the project folder and run:

npm install

This installs React, Vite, TypeScript, and the other packages required by Playground OS.

3. Start Playground OS

Run:

npm run dev

Vite will display a local address similar to:

http://localhost:5173

Hold Ctrl and click the address, or copy it into your browser.

4. Stop the development server

Return to the terminal and press:

Ctrl + C

Requirements

Before running the project, install:

• Node.js version 20.19.0 or newer
• npm, which is included with Node.js
• A modern browser such as Chrome, Edge, Firefox, or Safari

You can check whether Node.js and npm are installed with:

node --version
npm --version

Using Playground OS

When Playground OS opens for the first time, create a local account by entering a display name, username, and password.

After signing in, you can open applications from:

• The desktop icons
• The dock
• The application launcher

Windows can be dragged, resized, minimized, maximized, and snapped to the sides of the screen.

Your account, files, notes, settings, and desktop layout are saved locally in your browser.

Features

Desktop environment

• Draggable and resizable application windows
• Minimize and maximize controls
• Window snapping
• Movable desktop icons
• Desktop dock
• Application launcher
• Menu bar and control panels
• Browser-based notifications
• Multiple wallpapers and themes
• Adjustable interface scale and alert volume
• Persistent desktop layout and settings

File Explorer

• Browse Home, Documents, Pictures, Applications, and Trash
• Open folders, applications, files, and notes
• Search inside the current folder
• Rename and reorganize items
• Drag files between folders
• Move supported items onto the desktop
• Move files to Trash
• Restore or permanently delete files
• Empty the Trash
• Protected system folders

Notes

• Create, edit, rename, search, and delete notes
• Pin important notes
• Automatically generate note titles
• Live word and character counters
• Undo and redo
• Automatic saving
• Version history
• Restore previous versions
• Import .txt and .json notes
• Export notes as .txt or .json
• Synchronization with Documents/Notes in File Explorer

Terminal

Open Terminal from the dock, launcher, or with:

Ctrl + Shift + T

Available commands include:

help
clear
echo <text>
whoami
hostname
version
uptime
date
apps
about
theme <light|graphite|midnight>
wallpaper <redwood|moraine-lake|desert-dunes>
open <finder|notes|terminal|settings|system>

The terminal also supports command history and basic tab completion.

Settings and accounts

• Local account creation
• Login and lock screen
• Change display name
• Change username and password
• Change profile picture
• Light, Graphite, and Midnight themes
• Multiple wallpapers
• Interface scaling
• Alert volume controls
• Browser-reported system information

Keyboard Shortcuts

Shortcut	Action
Ctrl/Command + Space	Open or close the application launcher
Ctrl/Command + Shift + T	Open Terminal
Escape	Close open desktop panels
Ctrl/Command + Z	Undo while editing a note
Ctrl/Command + Shift + Z	Redo while editing a note

Available Commands

Command	Description
npm install	Installs the required project packages
npm run dev	Starts Playground OS in development mode
npm run build	Type-checks and creates a production build
npm run lint	Checks the source code for problems
npm run preview	Previews the production build locally

Built With

• React
• TypeScript
• Vite
• Zustand
• Framer Motion
• Lucide React
• CSS

Project Structure

Playground-WebOS/
├── public/
│   └── wallpapers/
│       └── Preview/          # Project preview image
├── src/
│   ├── apps/                 # File Explorer, Notes, Terminal, Settings, etc.
│   ├── components/
│   │   ├── auth/             # Account setup and login
│   │   ├── desktop/          # Desktop, dock, icons, panels, and menu bar
│   │   ├── settings/         # Settings components
│   │   └── windows/          # Window frame and window interactions
│   ├── data/                 # Application definitions
│   ├── stores/               # Application and virtual file-system state
│   ├── styles/               # Stylesheets
│   ├── types/                # Shared TypeScript types
│   ├── utils/                # Storage and desktop utilities
│   ├── App.tsx
│   └── main.tsx
├── package.json
├── tsconfig.json
└── vite.config.ts

Creating a Production Build

Run:

npm run build

The completed build will be placed in the dist folder.

You can test the build locally with:

npm run preview

The dist folder can be deployed to static hosting services such as GitHub Pages, Vercel, Netlify, or Cloudflare Pages.

Data and Privacy

Playground OS is a front-end demonstration project.

Accounts, passwords, notes, virtual files, settings, and desktop state are stored in the browser using localStorage.

The login system is part of the simulated operating-system experience. It is not secure authentication, passwords are not encrypted, and sensitive information should not be stored inside the project.

Clearing the browser's website data may delete saved Playground OS data.

Troubleshooting

npm is not recognized

Install Node.js from the official Node.js website, restart Visual Studio Code, and try again.

The project does not open automatically

Copy the address shown after running npm run dev and paste it into your browser.

Port 5173 is already being used

Vite will normally select another available port. Open the new address shown in the terminal.

Packages are missing or imports show errors

Run:

npm install

Then restart the development server:

npm run dev