Win95 GUI Library

A modular Windows 95-style GUI library for web applications. Create retro-styled interfaces with draggable windows, menus, buttons, sliders, and more - all with a single import line, just like p5.js!

Credits & Attribution

I can't take all the credit for this library. I found someone else's project that had a Windows 95 theme in it, and I decided to make a complete library out of it. While I've significantly expanded and enhanced it with comprehensive components, window management, advanced features, and a production-ready API, I want to acknowledge that the original Windows 95 styling and aesthetic foundation came from that initial work. This library represents a complete reimagining and expansion of those concepts into a full-featured, easy-to-use library for any project.

Features

Single Import - One line to get started: <script src="win95.js"></script>
Modular Design - Easy to develop and extend
Windows 95 Aesthetic - Authentic retro styling
Fully Functional Windows - Drag, resize, minimize, maximize, close
Complete Component Library - 50+ components (buttons, inputs, displays, navigation, overlays)
Advanced Components - File dialog, virtualized lists, tree view, rich text editor
Smart Scrollbars - Overlay scrollbars that appear only when needed, don't shift layout
Unified Menu System - Flexible popup menus with smart positioning, keyboard navigation, submenus, and tree support
Complete Window System - Full lifecycle events, focus management, window types (standard, modal, popup, tool), keyboard shortcuts
Layout System - Optional docking panels, split panes, and tabs (like Golden Layout)
Wallpaper System - Modular backgrounds (color, gradient, image, video, 2D/3D canvas, blank)
2D/3D Hybrid System - Embed 3D viewports in windows, 3D wallpapers with 2D UI
Desktop Icons - Clickable icons that open windows/applications
Unified API - p5.js-style simplicity with full power
Feature Toggles - Enable/disable features programmatically
Memory Leak Prevention - Automatic cleanup and resource tracking
Infinite Loop Protection - Safety limits and warnings
Framework Agnostic - Works with any JavaScript project (vanilla JS, React, Vue, etc.)
3D Project Ready - Perfect for adding UI to WebGL/Three.js projects
Mobile Responsive - Adapts to mobile devices automatically

Installation

npm (Recommended)

npm install win95js

Then in your HTML:

<link rel="stylesheet" href="node_modules/win95js/win95.css">
<script src="node_modules/win95js/win95.js"></script>

Or with a bundler:

import 'win95js/win95.css';
import 'win95js/win95.js';

CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/win95js@latest/win95.css">
<script src="https://cdn.jsdelivr.net/npm/win95js@latest/win95.js"></script>

Direct Download

Download win95.js and win95.css from the latest release, then include them in your HTML.

See INSTALLATION.md for detailed instructions.

Learning Path

Beginner? Start with example-beginner.html - Complete tutorial with detailed code explanations
Ready to build? Check out example-simple.html for a minimal working example
Want to see everything? Explore example-complete.html for all features
Need help? Read the INSTALLATION.md guide

Quick Start

Single Import (That's It!)

Using npm:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="node_modules/win95js/win95.css">
</head>
<body>
    <script src="node_modules/win95js/win95.js"></script>
    <script>
        win95.init();
        const win = win95.window({ title: 'My Window', width: 600, height: 400, content: '<h2>Hello, World!</h2>' });
    </script>
</body>
</html>

Using CDN:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/win95js@latest/win95.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/win95js@latest/win95.js"></script>
    <script>
        win95.init();
        const win = win95.window({ title: 'My Window', width: 600, height: 400, content: '<h2>Hello, World!</h2>' });
    </script>
</body>
</html>

Using Direct Download:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="win95.css">
</head>
<body>
    <script src="win95.js"></script>
    <script>
        win95.init();
        const win = win95.window({ title: 'My Window', width: 600, height: 400, content: '<h2>Hello, World!</h2>' });
    </script>
</body>
</html>

That's it! Just one import and you're ready to go.

Complete Example

See TEMPLATE.html for a complete starter template, or check out example-beginner.html for a detailed tutorial.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/win95js@latest/win95.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
          crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/win95js@latest/win95.js"></script>
    <script>
        win95.init({
            taskbar: true,
            taskbarPosition: 'bottom'
        });
        
        // Everything works together!
        win95.wallpaper.gradient({ from: '#008080', to: '#004040' });
        win95.window({ title: 'My App', width: 600, height: 400 });
        win95.button({ label: 'Click Me', onClick: () => alert('Clicked!') });
    </script>
</body>
</html>

Installation

Option 1: npm (Recommended for Node.js projects)

npm install win95js

Then include in your HTML:

<link rel="stylesheet" href="node_modules/win95js/win95.css">
<script src="node_modules/win95js/win95.js"></script>

Or with a bundler (Webpack, Vite, etc.):

import 'win95js/win95.css';
import 'win95js/win95.js';
// or
require('win95js/win95.css');
require('win95js/win95.js');

Option 2: CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/win95js@latest/win95.css">
<script src="https://cdn.jsdelivr.net/npm/win95js@latest/win95.js"></script>

Option 3: Download from GitHub (Direct Download)

Download the latest release:
- Go to the Releases page
- Download win95.js and win95.css from the latest release
- Or download the entire repository as a ZIP file
Include in your HTML:

<link rel="stylesheet" href="win95.css">
<script src="win95.js"></script>

Option 4: Clone from GitHub

# Clone the repository
git clone https://github.com/CharmingBlaze/win95js.git
cd win95js

# The library is ready to use! Just include:
# - win95.js (already built)
# - win95.css (already built)

Option 5: Build from Source

If you want to customize or rebuild:

# Clone the repository
git clone https://github.com/CharmingBlaze/win95js.git
cd win95js

# Build the bundle (no dependencies required)
node build.js

# This creates:
# - win95.js (complete bundle)
# - win95.css (complete stylesheet)

Quick Setup Checklist

Download win95.js and win95.css
Include both files in your HTML
(Optional) Include Font Awesome for icons
Call win95.init() to initialize
Start creating windows and components!

API Reference

Initialization

// Initialize desktop and taskbar
win95.init({
    taskbar: true,    // Show taskbar (default: true)
    desktop: true     // Create desktop container (default: true)
});

Windows

const window = win95.window({
    title: 'Window Title',
    icon: '<i class="fas fa-icon"></i>',
    width: 800,
    height: 600,
    x: 50,
    y: 50,
    content: '<p>Window content</p>',
    onClose: (win) => {},
    onMinimize: (win) => {},
    onMaximize: (win) => {}
});

// Window methods
window.close();
window.minimize();
window.maximize();
window.restore();
window.focus();
const content = window.getContent();

Buttons

const button = win95.button({
    label: 'Click Me',
    icon: '<i class="fas fa-hand-pointer"></i>',
    type: 'primary',
    onClick: () => {
        alert('Button clicked!');
    }
});

Sliders

const slider = win95.slider({
    label: 'Volume',
    min: 0,
    max: 100,
    value: 50,
    onChange: (value) => {
        console.log('Value:', value);
    }
});

Dropdowns

const dropdown = win95.dropdown({
    label: 'Theme',
    options: [
        { value: 'light', label: 'Light' },
        { value: 'dark', label: 'Dark' }
    ],
    onChange: (value) => {
        console.log('Selected:', value);
    }
});

Menus

// Simple menu
win95.menu.show(['New', 'Open', '---', 'Exit']);

// Menu with actions
win95.menu.show([
    { label: 'New', action: () => newFile() },
    { label: 'Open', action: () => openFile() }
]);

// Context menu
element.addEventListener('contextmenu', (e) => {
    win95.contextMenu([
        { label: 'Cut', action: () => cut() },
        { label: 'Copy', action: () => copy() }
    ], e);
});

Wallpaper

// Solid color
win95.wallpaper.color('#008080');

// Gradient
win95.wallpaper.gradient({
    from: '#008080',
    to: '#004040',
    type: 'linear',
    angle: 45
});

// Image
win95.wallpaper.image('wallpaper.jpg');

// Video
win95.wallpaper.video('background.mp4', { loop: true, muted: true });

// 2D Canvas
win95.wallpaper.canvas2d((ctx, width, height) => {
    ctx.fillStyle = '#008080';
    ctx.fillRect(0, 0, width, height);
}, { animate: true });

// 3D Canvas (Three.js)
win95.wallpaper.canvas3d((scene, camera, renderer) => {
    const cube = new THREE.Mesh(
        new THREE.BoxGeometry(1, 1, 1),
        new THREE.MeshBasicMaterial({ color: 0x00ffff })
    );
    scene.add(cube);
}, { THREE: THREE });

Layout System

// Create layout
const layout = win95.layout({
    allowPopout: true,
    persistLayout: true
});

// Add panels
layout.addPanel('left', {
    title: 'My Panel',
    content: '<p>Panel content</p>'
});

// Create splits
layout.createSplit('horizontal', [
    { title: 'Panel 1', content: '<p>Content 1</p>' },
    { title: 'Panel 2', content: '<p>Content 2</p>' }
]);

Advanced Components

// File dialog
const dialog = win95.openFileDialog({
    title: 'Open File',
    accept: ['.txt', '.json', '.png'],
    multiple: true,
    onSelect: (files) => {
        files.forEach(file => console.log(file.name));
    }
});
dialog.open();

// Virtualized list
const list = win95.virtualizedList({
    items: largeArray, // 10,000+ items
    itemHeight: 30,
    height: 400,
    renderItem: (item, index) => {
        const el = document.createElement('div');
        el.textContent = item.name;
        return el;
    }
});

// Tree view
const tree = win95.treeView({
    data: [
        {
            label: 'Folder',
            icon: '📁',
            children: [
                { label: 'file.txt', icon: '📄' }
            ]
        }
    ]
});

// Rich text editor
const editor = win95.richTextEditor({
    value: '<p>Initial content</p>',
    onChange: (html, text) => {
        console.log('Content:', html);
    }
});

Theme System

// Set theme
win95.theme.set({
    colors: {
        accent: '#ff4081',
        background: '#1e1e1e',
        panel: '#252526'
    },
    spacing: {
        md: 16,
        lg: 24
    }
});

// Get theme
const theme = win95.theme.get();

Desktop Icons

const icons = win95.core.get('icons');
if (icons) {
    icons.add({
        label: 'My App',
        icon: '<i class="fas fa-cube"></i>',
        x: 50,
        y: 50,
        onDoubleClick: () => {
            win95.window({ title: 'My App' });
        }
    });
}

Examples

The repository includes multiple example files you can open directly in your browser:

example-beginner.html ⭐ START HERE! - Complete tutorial with detailed explanations for beginners
example.html - Basic demo with windows and components
example-simple.html - Minimal setup example
example-complete.html - Full feature showcase
example-3d.html - 3D windows with Three.js
example-layout.html - Layout system demo
example-wallpaper.html - Wallpaper system demo
example-2d3d-hybrid.html - Hybrid 2D/3D application
example-menu.html - Menu system demo
example-advanced.html - Advanced components
example-theme.html - Theme customization
test-integration.html - Comprehensive integration tests

New to the library? Start with example-beginner.html - it includes detailed comments explaining every line of code!

Simply open any example file in your browser to see it in action!

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Use Cases

Retro Games - Add Windows 95-style UI to your games
3D Applications - Control panels and 3D windows for WebGL/Three.js projects
Web Applications - Unique retro interface for any web app
Dashboard Applications - Layout system for complex dashboards
IDE/Editor Interfaces - Docking panels for code editors
Prototyping - Quick UI mockups with nostalgic feel
Educational Projects - Learn about window management and UI systems
VR/AR Projects - 3D windows in virtual environments

Download

Latest Release

Download the latest version from the Releases page.

Files You Need

For basic usage, you only need two files:

win95.js - Complete JavaScript library (~300KB)
win95.css - Complete stylesheet (~40KB)

Optional Files

Font Awesome - For icons (use CDN or download separately)
Three.js - For 3D features (use CDN or download separately)

File Structure

win95-gui-library/
├── win95.js              # Main library file (use this!)
├── win95.css             # Main stylesheet (use this!)
├── lib/                   # Source modules (for development)
│   ├── win95-core.js
│   ├── win95-components.js
│   └── ...
├── example*.html         # Example files
├── test-integration.html # Integration tests
├── build.js              # Build script
├── README.md             # This file
└── LICENSE               # MIT License

Contributing

Contributions are welcome! The library is designed to be modular and easy to extend.

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make your changes
Test your changes (open test-integration.html)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

See CONTRIBUTING.md for more details.

License

This project is open source and available under the MIT License.

Credits

Inspired by classic Windows 95 interface design. Built with vanilla JavaScript, HTML, and CSS.

Built with nostalgia for the 90s computing era.

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
assets		assets
content		content
docs		docs
lib		lib
.gitignore		.gitignore
.npmignore		.npmignore
ARCHITECTURE.md		ARCHITECTURE.md
BUNDLE-COMPLETE.md		BUNDLE-COMPLETE.md
CHANGELOG.md		CHANGELOG.md
CHECKLIST.md		CHECKLIST.md
COMPLETE-FEATURES.md		COMPLETE-FEATURES.md
CONTRIBUTING.md		CONTRIBUTING.md
DISTRIBUTION.md		DISTRIBUTION.md
FINAL-STATUS.md		FINAL-STATUS.md
IMPLEMENTATION-PLAN.md		IMPLEMENTATION-PLAN.md
INSTALLATION.md		INSTALLATION.md
INTEGRATION.md		INTEGRATION.md
LICENSE		LICENSE
MISSING.md		MISSING.md
OPTIMIZATION.md		OPTIMIZATION.md
PERFORMANCE-AUDIT.md		PERFORMANCE-AUDIT.md
PROGRESS-REPORT.md		PROGRESS-REPORT.md
QUICK-START.md		QUICK-START.md
README.md		README.md
REFACTORING-REPORT.md		REFACTORING-REPORT.md
SETUP.md		SETUP.md
SUMMARY.md		SUMMARY.md
TEMPLATE.html		TEMPLATE.html
USAGE-2D3D.md		USAGE-2D3D.md
USAGE-ADVANCED.md		USAGE-ADVANCED.md
USAGE-CONFIG.md		USAGE-CONFIG.md
USAGE-DEBUG.md		USAGE-DEBUG.md
USAGE-LAYOUT.md		USAGE-LAYOUT.md
USAGE-MENU.md		USAGE-MENU.md
USAGE-SCROLLBARS.md		USAGE-SCROLLBARS.md
USAGE-THEME.md		USAGE-THEME.md
USAGE-WALLPAPER.md		USAGE-WALLPAPER.md
USAGE-WINDOWS.md		USAGE-WINDOWS.md
USAGE.md		USAGE.md
browserconfig.xml		browserconfig.xml
build.js		build.js
example-2d3d-hybrid.html		example-2d3d-hybrid.html
example-3d.html		example-3d.html
example-advanced.html		example-advanced.html
example-beginner.html		example-beginner.html
example-complete.html		example-complete.html
example-layout.html		example-layout.html
example-menu.html		example-menu.html
example-simple.html		example-simple.html
example-theme.html		example-theme.html
example-wallpaper.html		example-wallpaper.html
example.html		example.html
google440ed969d2c6e03e.html		google440ed969d2c6e03e.html
index.html		index.html
manifest.json		manifest.json
package.json		package.json
robots.txt		robots.txt
sitemap.xml		sitemap.xml
test-bundle.html		test-bundle.html
test-integration.html		test-integration.html
update-examples.js		update-examples.js
vercel.json		vercel.json
win95.css		win95.css
win95.d.ts		win95.d.ts
win95.js		win95.js

Folders and files

Latest commit

History

Repository files navigation

Win95 GUI Library

Credits & Attribution

Features

Installation

npm (Recommended)

CDN (jsDelivr)

Direct Download

Learning Path

Quick Start

Single Import (That's It!)

Complete Example

Installation

Option 1: npm (Recommended for Node.js projects)

Option 2: CDN (jsDelivr)

Option 3: Download from GitHub (Direct Download)

Option 4: Clone from GitHub

Option 5: Build from Source

Quick Setup Checklist

API Reference

Initialization

Windows

Buttons

Sliders

Dropdowns

Menus

Wallpaper

Layout System

Advanced Components

Theme System

Desktop Icons

Examples

Browser Support

Use Cases

Download

Latest Release

Files You Need

Optional Files

File Structure

Contributing

License

Credits

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages