Skip to content

commandAGI/browser-os

Repository files navigation

browser-os

A comprehensive browser-based operating system monorepo built with React, TypeScript, and Turbo.

Overview

browser-os provides a complete OS-in-a-tab experience - a fully functional operating system that runs entirely in the browser. It features desktop and mobile modes, window management, a virtual filesystem, process management, and a complete app ecosystem.

Key Features

  • Object-Oriented Architecture: Apps are classes that extend App, with clear separation of logic and UI
  • Apps as Processes: Every app spawns a process with full lifecycle management
  • Window Ownership: Apps create and own their windows, with shared control between App and OS
  • Desktop & Mobile Shells: Seamlessly switch between desktop and mobile modes
  • Advanced Windowing: Window class with shared control, snap-to-grid, drag/resize, multi-workspace
  • Virtual Filesystem: Multiple backend drivers (IndexedDB, OPFS, Memory, localStorage)
  • Process Management: Full process lifecycle with IPC and monitoring
  • App System: Object-oriented app architecture with AppManager and OS orchestration
  • Theme System: Multiple skins (Win95, macOS, Monaco, Glass) with runtime switching
  • Built-in Apps: Files, Terminal, Editor, Browser, Notes, Calendar, Settings, Store, Monitor
  • Real-time Collaboration: Optional cursor presence and multi-user support via Yjs

Prerequisites

  • Node.js >= 18.0.0
  • pnpm >= 8.0.0

Installation

pnpm install

Structure

browser-os/
├── apps/
│   ├── web-shell/          # React OS shell (web)
│   ├── electron-shell/     # Electron wrapper
│   └── showcase/           # Component gallery
├── packages/
│   ├── core/               # Event bus, IDs, Zod contracts
│   ├── ui/                 # Primitive components
│   ├── theme/              # Theme tokens and skins
│   ├── windowing/          # Window management
│   ├── workspace/          # Workspace management
│   ├── taskbar/            # Taskbar and app switcher
│   ├── desktop/            # Desktop and icons
│   ├── process/            # Process management
│   ├── fs/                 # Virtual filesystem
│   ├── shell/              # Desktop/mobile shell
│   ├── app-sdk/            # App SDK
│   ├── app-host/           # App sandboxing
│   ├── cursor/             # Cursor and presence
│   ├── net/                # Network abstraction
│   ├── notif/              # Notifications
│   ├── settings/            # Settings store
│   └── telemetry/          # Metrics and logging
├── system-apps/
│   ├── files/              # File manager
│   ├── terminal/           # Terminal
│   ├── editor/             # Monaco editor
│   ├── browser/            # Web browser
│   ├── notes/             # Notes app
│   ├── calendar/          # Calendar
│   ├── settings/          # Settings panel
│   ├── store/             # App store
│   └── monitor/           # Process monitor
└── examples/
    ├── basic-windowing/   # Windowing example
    ├── theme-switching/   # Theme example
    └── custom-app/        # Custom app example

Quick Start

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Start web shell (main OS interface)
pnpm --filter @browser-os/web-shell dev

# Run tests
pnpm test

Key Features

  • Windowing: Floating windows with drag/resize, snap-to-grid, multi-workspace
  • Process Management: Lifecycle, IPC, monitoring, crash isolation
  • Virtual Filesystem: Multiple drivers (mem, idb, opfs, localStorage), mount system, file watching
  • Themes: Win95, macOS, Monaco, Glass with runtime switching
  • Mobile Mode: Fullscreen app cards, app switcher, gesture support

Architecture

Core Concepts

Desktop Shell: Composed of windowing + desktop + taskbar + workspaces + app host + process manager + fs + cursor + theme.

Apps: Packages exposing a manifest + React entry point. Installable & updatable via the app store.

Modes:

  • Desktop Mode: XY window positioning, taskbar at bottom/top
  • Mobile Mode: Full-screen cards, app switcher replaces taskbar, desktop grid = home screen

Package Dependencies

core → windowing → workspace, taskbar, desktop
core → process → app-sdk → app-host
core → fs, cursor, net, notif, settings, telemetry
shell → windowing + taskbar + desktop

See individual package READMEs for detailed API documentation.

Documentation

Examples

License

MIT

About

No description, website, or topics provided.

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages