Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/old-windows/llms.txt

Use this file to discover all available pages before exploring further.

Old Windows follows a straightforward React architecture: a single-page app mounted at <div id="root"> in index.html, bundled by Vite, with all window state held in a React context at the top of the tree. There are no external state managers, no server-side rendering, and no routing library — just four components, one context, and one config array that together produce the full Win98 desktop experience.

​
Component tree

The render hierarchy from root to leaf looks like this:
1

WindowProvider (WindowContext.js)

The outermost wrapper. It creates a React useState array called windows and exposes six action callbacks — openWindow, closeWindow, minimizeWindow, maximizeWindow, restoreWindow, and focusWindow — through context. Every component that touches window state reads from this context via the useWindows() hook.
2

Desktop (Desktop.js)

Mounted directly inside WindowProvider. Desktop does four things simultaneously:
  • Maps over the apps array from config/apps.js to render one desktop icon div per app. Single-click selects; double-click calls openWindow.
  • Maps over the windows array from context to render one <Window> component per open (or maximized) window.
  • Renders the visitor counter widget (bottom-right, starts at 1337042, randomly increments every ~3 s).
  • Renders the <Taskbar> and the two CRT effect divs (crt-overlay and crt-flicker).
3

Window (Window.js)

One instance per entry in the windows context array. Each Window is a Framer Motion motion.div that handles dragging (via useDragControls), minimize/maximize/close title-bar buttons, and a status bar with WebRing navigation (Prev / Random / Next). Returns null when the window’s state is "minimized".
4

Taskbar (Taskbar.js)

Fixed to the bottom of the viewport at z-index: 9999. Contains the Start button (which toggles the Start menu pop-up), one taskbar button per open window, and a live clock that updates every second. Clicking a taskbar button focuses, minimizes, or restores the corresponding window depending on its current state.

​
Data flow

All mutable state lives exclusively in WindowContext. No component maintains its own copy of which windows are open — they read the windows array and call the context actions: 
apps array (static config)
        │
        ▼
  Desktop reads apps → renders icons
        │
        │ user double-clicks icon
        ▼
  openWindow(id, title, component, icon, { width, height })
        │
        ▼
  WindowContext.windows state (array of window objects)
        │
        ├─── Desktop maps windows → renders <Window> instances
        │
        └─── Taskbar maps windows → renders taskbar buttons
When openWindow is called it appends a new window object to the windows array. When closeWindow is called it filters that object out. Every other action (minimizeWindow, maximizeWindow, restoreWindow, focusWindow) produces a new array via .map() — the state is never mutated directly. Because Desktop and Taskbar both derive their output from the same windows array, they stay in sync automatically through React’s re-render cycle.

​
Config layer

config/apps.js exports a single apps array. This array is the only place in the codebase where the nine built-in apps are declared. Desktop imports it to render icons; Taskbar imports it to populate the Start menu and to power WebRing navigation inside each window’s status bar. Each entry in the array looks like: 
{
  id: 'home',
  title: 'index.html',
  icon: <span>🏠</span>,
  component: HomeComponent,
  width: 700,
  height: 500
}
See the App Config page for a full field reference and instructions for adding your own entries.

​
Architecture sub-pages

Window System

Drag mechanics, Framer Motion integration, z-index stacking, window state lifecycle, and the WebRing navigation bar.

App Config

The apps array structure, all supported fields, and how Desktop and Taskbar consume the config to render icons and menu items.

Build docs developers (and LLMs) love

Get started for freeTalk to us