Window Manager

Draggable, resizable floating windows with z-order focus, snapping, minimize/maximize, docks, and persistence.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { FloatingWindow, WindowDock, WindowManager } from "@vizejs/ui/window-manager";

Or copy the source into your project with vize lib pull window-manager (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Two draggable, resizable windows with title bars, window controls, and a taskbar dock. -->
<script setup lang="ts">
import { FloatingWindow, WindowDock, WindowManager } from "@vizejs/ui/window-manager";

// The manager is the positioning area for its windows, so it needs a size.
const desktopSize = { blockSize: "24rem", inlineSize: "100%" };
</script>

<template>
  <WindowManager :snap-threshold="12" :style="desktopSize">
    <FloatingWindow
      id="notes"
      title="Notes"
      :default-rect="{ x: 16, y: 16, width: 280, height: 180 }"
    >
      <template #default="{ handleProps, minimize, toggleMaximize }">
        <div v-bind="handleProps">Notes</div>
        <button type="button" @click="minimize">Minimize notes</button>
        <button type="button" @click="toggleMaximize">Maximize notes</button>
        <p>Drag the title bar or use the arrow keys to move this window.</p>
      </template>
    </FloatingWindow>
    <FloatingWindow
      id="calendar"
      title="Calendar"
      :default-rect="{ x: 320, y: 48, width: 260, height: 200 }"
    >
      <template #default="{ handleProps, minimize }">
        <div v-bind="handleProps">Calendar</div>
        <button type="button" @click="minimize">Minimize calendar</button>
        <p>Shift with the arrow keys resizes the window.</p>
      </template>
    </FloatingWindow>
    <WindowDock label="Taskbar" />
  </WindowManager>
</template>

API

FloatingWindow

Source: src/families/layout/window-manager/floating-window.vue

Props

Events

Slots

Exposed

WindowDock

Source: src/families/layout/window-manager/window-dock.vue

Props

Slots

WindowManager

Source: src/families/layout/window-manager/window-manager.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for window-manager.vue, floating-window.vue, and window-dock.vue (@vizejs/ui/window-manager). Rows are proven by window-manager-model.test.ts, window-manager.test.ts, and window-manager-ssr.test.ts; compile-only assertions live in window-manager.types.test-d.ts.

Windows are non-modal role="dialog" regions named by title; the drag handle is a focusable element spread by the consumer (handleProps) that advertises its arrow-key shortcuts.