# nievacode-dev/windows-11-html architecture

> Architecture diagram of the GitHub repository nievacode-dev/windows-11-html, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nievacode-dev/windows-11-html
- Repository: https://github.com/nievacode-dev/windows-11-html

## Overview

Windows 11 Web Experience is a browser-based desktop-shell recreation. The main user flow begins at the lock screen, enters the desktop, and opens applications through shell launch surfaces; the window engine then manages their interactive windows and taskbar presence. The README also documents search, widgets, quick settings, context-menu file creation, snapping, built-in apps, and system guards. Several of those features are documented but their implementation was not sampled, so their wiring is shown only where the available evidence supports it.

Main entry points: [`js/window-mode.js`](https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js) (Window Engine), [`main.js`](https://github.com/nievacode-dev/windows-11-html/blob/master/main.js) (Desktop Shell), [`js/settings.js`](https://github.com/nievacode-dev/windows-11-html/blob/master/js/settings.js) (Settings), [`js/copy-and-paste.js`](https://github.com/nievacode-dev/windows-11-html/blob/master/js/copy-and-paste.js) (Lock Screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Desktop Shell"]
  node_lock["Lock Screen<br/>[copy-and-paste.js]"]
  node_desktop["Desktop Shell<br/>[main.js]"]
  node_startsearch["Start &amp; Search<br/>[main.js]"]
  node_desktopicons["Desktop Icons<br/>[desktop-icons.js]"]
  node_widgetsquick["Widgets &amp; Quick Settings<br/>[index.html]"]
  node_contextmenu["Desktop Context Menu<br/>[main.js]"]
end

subgraph group_windows["Window Management"]
  node_windowengine["Window Engine<br/>[window-mode.js]"]
  node_windowdrag["Universal Dragging<br/>[universal-drag.js]"]
  node_snapassist["Snap &amp; Assist<br/>[window-mode.js]"]
  node_taskbarpreview["Taskbar &amp; Previews<br/>[window-mode.js]"]
end

subgraph group_apps["Built-in Apps"]
  node_terminal["Terminal<br/>[cmd.js]"]
  node_virtualfs[("Virtual Filesystem<br/>[cmd.js]")]
  node_taskmanager["Task Manager<br/>[task-manager.js]"]
  node_settings["Settings<br/>[settings.js]"]
  node_edge["Microsoft Edge<br/>[index.html]"]
  node_runabout["Run &amp; About<br/>[index.html]"]
  node_powerdialogs["Power Dialogs<br/>[main.js]"]
end

subgraph group_system["System Experience"]
  node_systemguards["System Guards<br/>[index.html]"]
  node_preferences[("Theme Preference<br/>[settings.js]")]
end

node_user(("User"))
node_browser(("Browser Runtime"))

node_user -->|"swipes to unlock"| node_lock
node_lock -->|"unlocks"| node_desktop
node_user -->|"interacts with"| node_desktop
node_desktop -->|"opens"| node_startsearch
node_desktop -->|"manages icons"| node_desktopicons
node_desktop -->|"opens panels"| node_widgetsquick
node_desktop -->|"opens menu"| node_contextmenu
node_startsearch -->|"launches apps"| node_windowengine
node_contextmenu -->|"opens app window"| node_windowengine
node_desktopicons -->|"opens app window"| node_windowengine
node_windowengine -->|"updates taskbar"| node_taskbarpreview
node_windowengine -->|"manages snapping"| node_snapassist
node_windowdrag -.->|"drags windows"| node_windowengine
node_windowengine -->|"hosts window"| node_terminal
node_windowengine -->|"hosts window"| node_taskmanager
node_windowengine -->|"hosts window"| node_settings
node_windowengine -->|"hosts window"| node_edge
node_windowengine -->|"hosts dialogs"| node_runabout
node_windowengine -->|"hosts dialogs"| node_powerdialogs
node_terminal -->|"reads and modifies"| node_virtualfs
node_settings -->|"reads and writes"| node_preferences
node_settings -->|"updates page theme"| node_browser
node_user -->|"encounters"| node_systemguards
node_user -->|"chooses power action"| node_powerdialogs

click node_lock "https://github.com/nievacode-dev/windows-11-html/blob/master/js/copy-and-paste.js"
click node_desktop "https://github.com/nievacode-dev/windows-11-html/blob/master/main.js"
click node_startsearch "https://github.com/nievacode-dev/windows-11-html/blob/master/main.js"
click node_desktopicons "https://github.com/nievacode-dev/windows-11-html/blob/master/js/desktop-icons.js"
click node_widgetsquick "https://github.com/nievacode-dev/windows-11-html/blob/master/index.html"
click node_contextmenu "https://github.com/nievacode-dev/windows-11-html/blob/master/main.js"
click node_windowengine "https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js"
click node_windowdrag "https://github.com/nievacode-dev/windows-11-html/blob/master/js/universal-drag.js"
click node_snapassist "https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js"
click node_taskbarpreview "https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js"
click node_terminal "https://github.com/nievacode-dev/windows-11-html/blob/master/js/cmd.js"
click node_virtualfs "https://github.com/nievacode-dev/windows-11-html/blob/master/js/cmd.js"
click node_taskmanager "https://github.com/nievacode-dev/windows-11-html/blob/master/js/task-manager.js"
click node_settings "https://github.com/nievacode-dev/windows-11-html/blob/master/js/settings.js"
click node_edge "https://github.com/nievacode-dev/windows-11-html/blob/master/index.html"
click node_runabout "https://github.com/nievacode-dev/windows-11-html/blob/master/index.html"
click node_powerdialogs "https://github.com/nievacode-dev/windows-11-html/blob/master/main.js"
click node_systemguards "https://github.com/nievacode-dev/windows-11-html/blob/master/index.html"
click node_preferences "https://github.com/nievacode-dev/windows-11-html/blob/master/js/settings.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_lock,node_desktop,node_startsearch,node_desktopicons,node_widgetsquick,node_contextmenu,node_user,node_browser toneBlue
class node_windowengine,node_windowdrag,node_snapassist,node_taskbarpreview toneAmber
class node_terminal,node_virtualfs,node_taskmanager,node_settings,node_edge,node_runabout,node_powerdialogs toneMint
class node_systemguards,node_preferences toneRose
```

## Components

### Desktop Shell

- [Lock Screen](https://github.com/nievacode-dev/windows-11-html/blob/master/js/copy-and-paste.js): `js/copy-and-paste.js`
- [Desktop Shell](https://github.com/nievacode-dev/windows-11-html/blob/master/main.js): `main.js`
- [Start & Search](https://github.com/nievacode-dev/windows-11-html/blob/master/main.js): `main.js`
- [Desktop Icons](https://github.com/nievacode-dev/windows-11-html/blob/master/js/desktop-icons.js): `js/desktop-icons.js`
- [Widgets & Quick Settings](https://github.com/nievacode-dev/windows-11-html/blob/master/index.html): `index.html`
- [Desktop Context Menu](https://github.com/nievacode-dev/windows-11-html/blob/master/main.js): `main.js`

### Window Management

- [Window Engine](https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js): `js/window-mode.js`
- [Universal Dragging](https://github.com/nievacode-dev/windows-11-html/blob/master/js/universal-drag.js): `js/universal-drag.js`
- [Snap & Assist](https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js): `js/window-mode.js`
- [Taskbar & Previews](https://github.com/nievacode-dev/windows-11-html/blob/master/js/window-mode.js): `js/window-mode.js`

### Built-in Apps

- [Terminal](https://github.com/nievacode-dev/windows-11-html/blob/master/js/cmd.js): `js/cmd.js`
- [Virtual Filesystem](https://github.com/nievacode-dev/windows-11-html/blob/master/js/cmd.js): `js/cmd.js`
- [Task Manager](https://github.com/nievacode-dev/windows-11-html/blob/master/js/task-manager.js): `js/task-manager.js`
- [Settings](https://github.com/nievacode-dev/windows-11-html/blob/master/js/settings.js): `js/settings.js`
- [Microsoft Edge](https://github.com/nievacode-dev/windows-11-html/blob/master/index.html): `index.html`
- [Run & About](https://github.com/nievacode-dev/windows-11-html/blob/master/index.html): `index.html`
- [Power Dialogs](https://github.com/nievacode-dev/windows-11-html/blob/master/main.js): `main.js`

### System Experience

- [System Guards](https://github.com/nievacode-dev/windows-11-html/blob/master/index.html): `index.html`
- [Theme Preference](https://github.com/nievacode-dev/windows-11-html/blob/master/js/settings.js): `js/settings.js`

### Other components

- **User**
- **Browser Runtime**

## Connections

- User → Lock Screen: swipes to unlock
- Lock Screen → Desktop Shell: unlocks
- User → Desktop Shell: interacts with
- Desktop Shell → Start & Search: opens
- Desktop Shell → Desktop Icons: manages icons
- Desktop Shell → Widgets & Quick Settings: opens panels
- Desktop Shell → Desktop Context Menu: opens menu
- Start & Search → Window Engine: launches apps
- Desktop Context Menu → Window Engine: opens app window
- Desktop Icons → Window Engine: opens app window
- Window Engine → Taskbar & Previews: updates taskbar
- Window Engine → Snap & Assist: manages snapping
- Universal Dragging → Window Engine: drags windows
- Window Engine → Terminal: hosts window
- Window Engine → Task Manager: hosts window
- Window Engine → Settings: hosts window
- Window Engine → Microsoft Edge: hosts window
- Window Engine → Run & About: hosts dialogs
- Window Engine → Power Dialogs: hosts dialogs
- Terminal → Virtual Filesystem: reads and modifies
- Settings → Theme Preference: reads and writes
- Settings → Browser Runtime: updates page theme
- User → System Guards: encounters
- User → Power Dialogs: chooses power action