Themable Desktop Environment

defuss-desktop is a comprehensive window manager/desktop environment that enables you to create desktop-like environments directly in the browser - like Windows XP. It provides a complete window system with resizable, movable windows, desktop management, task bars, and application launchers - perfect for building complex web applications that need a desktop-style interface.

Features

• 🪟 Full Window Management: Create, resize, move, minimize, maximize, and close windows
• 🖥️ Desktop Environment: Desktop icons, wallpaper support, and multi-workspace functionality
• 📊 Task Management: Task bar, system tray, and application launcher
• 🎨 Customizable UI: Themeable window decorations and desktop styling
• ⚡ Performance Optimized: Efficient DOM manipulation and memory management
• 📱 Responsive Design: Adapts to different screen sizes and orientations
• 🎯 Event System: Comprehensive window and desktop event handling
• 🔧 Developer Friendly: Simple API for creating window-based applications

Basic Usage

import { WindowManager, Window } from 'defuss-desktop';

// Initialize the window manager
const wm = new WindowManager({
  container: document.body,
  enableDesktop: true,
  enableTaskbar: true
});

// Create a new window
const window = wm.createWindow({
  title: 'My Application',
  width: 800,
  height: 600,
  resizable: true,
  minimizable: true,
  maximizable: true,
  content: '<div>Hello, Desktop World!</div>'
});

// Show the window
window.show();

Advanced Features

• Window States: Normal, minimized, maximized, fullscreen
• Desktop Management: Multiple desktops/workspaces
• Application Launcher: Start menu and application grid
• File Manager Integration: Desktop file operations
• System Tray: Notification area and quick actions
• Window Snapping: Automatic window positioning and sizing
• Keyboard Shortcuts: Comprehensive keyboard navigation
• Accessibility Support: Screen reader and keyboard-only navigation

Integrating defuss-wm in your project

🚀 Looking for a template to start from? Check out our examples that demonstrate desktop environments and window management.

1. Install defuss-wm:

# install a decent package manager
npm i -g pnpm@^9.13.2

# from your project root folder, add defuss-wm to your dependencies
pnpm install defuss-wm

2. Set up your desktop environment:

import { WindowManager } from 'defuss-wm';

// Create a desktop environment
const wm = new WindowManager({
  container: document.getElementById('desktop'),
  theme: 'default',
  enableDesktop: true,
  enableTaskbar: true,
  enableSystemTray: true
});

// Register an application
wm.registerApplication({
  id: 'text-editor',
  name: 'Text Editor',
  icon: '/icons/text-editor.svg',
  component: TextEditorComponent
});

// Create and show a window
const window = wm.createWindow({
  appId: 'text-editor',
  title: 'Untitled Document',
  width: 800,
  height: 600,
  x: 100,
  y: 100
});

window.show();

3. Handle window events:

// Listen for window events
window.on('resize', (event) => {
  console.log('Window resized:', event.width, event.height);
});

window.on('move', (event) => {
  console.log('Window moved:', event.x, event.y);
});

window.on('close', () => {
  console.log('Window closed');
});

// Desktop events
wm.on('windowCreated', (window) => {
  console.log('New window created:', window.id);
});

wm.on('desktopClick', (event) => {
  console.log('Desktop clicked at:', event.x, event.y);
});

🚀 How does defuss-wm work?

defuss-wm provides a complete window management system built on top of the defuss framework. It manages window lifecycle, desktop interactions, and provides a familiar desktop environment experience within web applications.

• Window Rendering: Uses defuss's efficient rendering system for window contents
• Event Management: Comprehensive event system for window and desktop interactions
• Layout Engine: Automatic window positioning and snapping
• Theme System: Customizable window decorations and desktop styling
• State Management: Persistent window states and desktop configurations

Inside this package, you'll find the following relevant folders and files:

/
├── src/
│   ├── WindowManager.ts
│   ├── Window.ts
│   ├── Desktop.ts
│   ├── Taskbar.ts
│   ├── ApplicationLauncher.ts
│   └── themes/
├── dist/
├── tsconfig.json
├── LICENSE
├── package.json

The core WindowManager class orchestrates all window operations, while individual components handle specific aspects like the desktop, taskbar, and application management.

🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command | Action | | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | pnpm build | Build a new version of the window manager. | | pnpm test | Run the test suite for defuss-wm. |