Desktop
The Desktop API allows mods to add custom widgets to the game desktop. Widgets are rendered inside sandboxed iframes with full SDK access via window.HackhubSDK.
Import
ts
import { Desktop } from "@hotbunny/hackhub-content-sdk";Functions
Desktop.addWidget(widget: DesktopWidget)
Adds a custom widget to the desktop. The widget's HTML file is loaded from the mod's file system and rendered in a sandboxed iframe.
ts
Desktop.addWidget({
id: "clock-widget",
src: "widgets/clock.html",
width: 200,
height: 100,
position: { x: 50, y: 50 },
transparent: true,
});Desktop.removeWidget(id: string)
Removes a previously added widget by its ID.
ts
Desktop.removeWidget("clock-widget");Desktop.getWidgets(): DesktopWidget[]
Returns all mod-added desktop widgets.
ts
const widgets = Desktop.getWidgets();
console.log(`${widgets.length} widgets on desktop`);DesktopWidget Interface
| Property | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier for the widget |
src | string | Yes | Path to HTML file relative to mod root |
width | number | Yes | Widget width in pixels |
height | number | Yes | Widget height in pixels |
position | { x: number; y: number } | No | Position on desktop (default: 0, 0) |
transparent | boolean | No | Transparent background (default: true) |
Widget HTML File
Widget HTML files are loaded from your mod's directory. Inside the widget, you have access to the full SDK through window.HackhubSDK.
File Structure
my-mod/
├── manifest.json
├── index.ts
└── widgets/
└── clock.htmlExample: widgets/clock.html
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: monospace;
color: white;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#clock {
font-size: 2rem;
background: rgba(0, 0, 0, 0.5);
padding: 1rem 2rem;
border-radius: 8px;
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div id="clock">--:--:--</div>
<script>
setInterval(() => {
document.getElementById('clock').textContent =
new Date().toLocaleTimeString();
}, 1000);
</script>
</body>
</html>Accessing the SDK
Inside widget HTML files, the full HackhubSDK is available on window.HackhubSDK:
html
<script>
const sdk = window.HackhubSDK;
// Use any SDK API
sdk.UI.toast("Widget loaded!");
sdk.Events.on("Terminal.Ping", (data) => {
document.getElementById("status").textContent = `Pinged: ${data.ip}`;
});
// Storage (scoped to your mod)
const count = sdk.Storage.get("visitCount") || 0;
sdk.Storage.set("visitCount", count + 1);
</script>Example: System Monitor Widget
index.ts (mod entry):
ts
import { Desktop } from "@hotbunny/hackhub-content-sdk";
Desktop.addWidget({
id: "sys-monitor",
src: "widgets/monitor.html",
width: 220,
height: 120,
position: { x: 20, y: 400 },
transparent: true,
});widgets/monitor.html:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(20,20,40,0.7));
color: #0f0;
font-family: monospace;
padding: 12px;
font-size: 12px;
border-radius: 6px;
}
</style>
</head>
<body>
<div>CPU: <span id="cpu">0</span>%</div>
<div>MEM: <span id="mem">0</span> MB</div>
<div>Mod: <span id="mod"></span></div>
<script>
document.getElementById('mod').textContent = HackhubSDK.modId;
setInterval(() => {
document.getElementById('cpu').textContent = Math.floor(Math.random() * 100);
document.getElementById('mem').textContent = Math.floor(Math.random() * 8000);
}, 2000);
</script>
</body>
</html>