OS.js Web Desktop

A complete, production-ready web desktop environment built on OS.js v3 with comprehensive file management, session persistence, and mobile support.

✨ Features

Desktop Environment

• Full Window Manager - Draggable, resizable windows with minimize/maximize/close
• Desktop Icons - Windows-style desktop with file/folder icons
• Taskbar Panel - Application launcher and window switching
• Mobile Responsive - Fullscreen windows and optimized touch interface

File Management

• Comprehensive File Manager - Browse, create, delete, rename files and folders
• Multiple View Modes - Switch between icon and list views
• Desktop Integration - Files displayed directly on desktop (like Windows)
• Context Menus - Right-click file operations
• Virtual File System (VFS) - Full filesystem abstraction layer

Applications

• File Manager - Extensive file operations with dual view modes
• Text Editor - Create and edit text files
• Calculator - Functional calculator application

Session Management

• Polymorphic Session System - Capture and restore entire desktop state
• JSON Serialization - Export/import sessions as single files
• Server-side API - Inspect and modify sessions programmatically
• App State Persistence - Each app can serialize its own state

Installation

npm install osjs-webdesktop

Quick Start

# Clone or install
git clone https://github.com/AnEntrypoint/osjs-webdesktop.git
cd osjs-webdesktop

# Install dependencies
npm install

# Build client
npm run build

# Start server
npm run serve

Visit http://localhost:8000 to access the desktop.

Development

npm run watch

Watches for file changes and rebuilds automatically.

Structure

src/
├── client/               # Frontend application
│   ├── index.js          # Client entry point with service providers
│   ├── index.html        # HTML template
│   ├── index.scss        # Global styles
│   ├── session-manager.js    # Session capture/restore logic
│   ├── session-provider.js   # Session UI and controls
│   └── example-app.js    # Example apps with serialization
├── server/               # Backend server
│   ├── index.js          # Server entry point with service providers
│   ├── config.js         # Server configuration
│   ├── session-service.js    # Session storage and inspection
│   └── session-provider.js   # Session API endpoints
└── shared/               # Shared code
    └── session-protocol.js   # Session manifest format

Technology Stack

• Framework: OS.js v3
• UI: Hyperapp
• Build: Webpack 5
• Server: Node.js with Express
• Database: Session storage via connect-loki

Session Management

This OS.js implementation includes a polymorphic session management system that allows you to:

• Capture: Serialize the entire OS state (windows + VFS) to JSON
• Restore: Fully restore OS state from a session file
• Sync: Upload sessions to server for remote inspection
• Inspect: Server-side API to analyze sessions programmatically

Quick Usage

Keyboard Shortcuts:

• Ctrl+Shift+S - Download current session
• Ctrl+Shift+O - Upload and restore session

Console Commands:

openFileManager()      // Open file manager
openTextEditor()       // Open text editor
openCalculator()       // Open calculator

Server-side Inspection:

node examples/inspect-session.js

node examples/modify-session.js session.json

See SESSION_MANAGER.md for complete documentation.

License

MIT