Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/linuxfandudeguy/HagalazOS/llms.txt

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

HagalazOS GUI mode is a fully browser-native desktop environment that boots inside a single HTML page. It recreates the feel of a classic windowed OS — draggable windows, a persistent taskbar, and a grid of clickable desktop icons — using nothing but HTML, CSS, and vanilla JavaScript running directly in any modern browser tab.

​
How it loads

The entry point is os.html. On page load it pulls in three layers of scripts and styles:
1

Styles

Two CDN stylesheets are applied first:
  • 7.css (unpkg.com/7.css) — provides the complete Windows 7 visual theme for window chrome, buttons, and title bars.
  • Bootstrap Icons (cdn.jsdelivr.net/npm/bootstrap-icons) — supplies the bi-* icon classes used on desktop shortcuts and taskbar buttons.
Two local stylesheets follow: style.css (wallpaper, taskbar, and window-wrapper geometry) and desktop.css (icon grid and highlight pseudo-element).
2

Core scripts

script.js is the kernel: it owns the grid system, window lifecycle (openWindow, minimizeWindow, maximizeWindow, closeWindow), blob-iframe rendering, drag logic, and the Ctrl+X hotkey listener.dragjs.js is loaded immediately after and enables drag-and-drop of .js files onto the desktop — dropped scripts are evaluated in-page, allowing sideloaded app registrations at runtime.
3

App scripts

Per-app JS files (e.g. apps/calculator.js, apps/browser.js) each push one entry onto window.Apps[]. The window.onload handler in script.js iterates that array to render every icon and taskbar button.

​
DOM regions

The page body contains exactly three top-level regions that cooperate to produce the desktop layout.
ElementRole
#desktopAbsolutely-positioned container for all desktop icon divs
#windowsAbsolutely-positioned container where .window-wrapper divs are appended when apps open
.taskbar / #taskbarFixed 48 px bar pinned to bottom: 0 holding quick-launch buttons
#desktop and #windows are both position: absolute; width: 100%; height: 100% so they overlay each other. Windows are rendered above icons because they receive a higher z-index via zIndexCounter.

​
App registration

Apps declare themselves by pushing a descriptor object onto window.Apps[] before window.onload fires. The boot loop in script.js reads this array, creates an icon div for each entry, and optionally adds a taskbar button. 
window.Apps = window.Apps || [];
window.Apps.push({
  id: "my-app",
  title: "My App",
  icon: "bi-app",
  htmlPath: "./apps/myapp.html",
  taskbar: true
});
Icons are placed on an 80 px grid. If no explicit gridX/gridY is supplied, findNextFreeCell() picks the first unoccupied cell automatically. See Desktop for the full grid reference.

​
Keyboard shortcut

ShortcutAction
Ctrl + XCloses the topmost window (highest z-index among all .window-wrapper elements)
Ctrl + X is the only built-in global keyboard shortcut. Individual apps rendered inside blob iframes can define their own shortcuts independently without interference.

​
Explore the subsystems

Windows

Draggable, minimizable, maximizable windows built around the 7.css title-bar structure and blob-iframe sandboxing.

Desktop

The 80 px icon grid, window.Apps[] descriptor format, and icon rendering rules.

Taskbar

The fixed 48 px quick-launch bar and how apps opt in with taskbar: true.

Drag & Drop

Drop a .js app file directly onto the desktop to sideload it at runtime via dragjs.js.

Build docs developers (and LLMs) love

Get started for freeTalk to us