nextapps-de/winbox

https://nextapps-de.github.io/winbox

Summary

WinBox is a vanilla JavaScript window manager for the web that creates draggable, resizable, desktop-style windows inside a browser page. It ships as a single bundle with no external dependencies and is released under the Apache-2.0 license. A live demo plus Vue and React wrappers are referenced from the README.

What it is useful for

WinBox fits situations where a web app needs floating, stackable panels rather than a flat page layout. The README's topics and examples point to use cases such as multi-pane dashboards, floating editors or preview panels, in-browser "desktop" simulators, and modal-like overlays that users can still drag around. Because it has no dependencies and exposes a plain JS API (new WinBox(...), winbox.mount(node), winbox.setUrl(...)), it can be dropped into existing pages or used as the shell for an embedded tool. The README also references third-party Vue (vue-winbox) and React (react-winbox) wrappers for component-based apps.

One documented limitation to be aware of: the README states that using multiple roots at the same time is only partially supported, since they share the same viewport.

How engineers can use it

The README documents four installation paths:

1. NPM (for bundler-based apps): npm install winbox.

2. Bundled script (recommended for plain HTML). Load winbox.bundle.min.js, which includes JS, CSS, HTML, and icons as base64. The README suggests a preload hint and async:

<head>
  <link rel="preload" href="winbox.bundle.min.js" as="script">
</head>
<body>
  <script src="winbox.bundle.min.js" async></script>
  <script src="my-script.js" defer></script>
</body>

3. Non-bundled. Include winbox.min.css and winbox.min.js separately.

4. ES6 modules. Import from src/js/winbox.js; the stylesheet must be loaded manually because only the bundled build auto-loads it. The ES6 modules are not minified, so the README recommends using a bundler.

Once loaded, a window is created with a title and an options object, for example:

new WinBox("Editor", {
  mount: document.querySelector("#my-editor"),
  width: "50%",
  height: "50%",
  x: "center",
  y: "center",
  onclose: function(force){ /* return true to abort close */ }
});

Other documented options include url (loads via iframe), modal: true, background, border, icon, autosize, overflow, and per-side top/right/bottom/left viewport constraints. Themes live in dist/css/themes/ and are applied via the class option. For full details, refer to the README's Options, API, Themes, and Customize sections.