Resizable & Snap Window (Pure HTML / CSS / JavaScript)

This project is a standalone, dependency-free demonstration of a desktop-style floating window implemented using plain HTML, CSS, and JavaScript, featuring drag, resize, snap-to-edge behavior, and maximize/restore logic.

Features

Draggable window via a custom title bar
Eight-direction resize handles (edges and corners)
Live snap to screen edges and corners (halves and quarters)
Automatic restore when dragging out of a snap zone
Maximize and restore support
Minimum size constraints
Boundary clamping to the viewport
Canvas that automatically resizes with the window
Single-file implementation (no build step, no dependencies)

Behavior Overview

Drag the title bar to move the window.
Resize using any edge or corner handle.
Snap occurs automatically when the cursor is near screen edges or corners.
Unsnap happens when the window is dragged away from the snap zone.
Maximize fills the viewport and disables snapping until restored.
Restore on grab: dragging a snapped window immediately restores it to its previous size and position.

File Structure

index.html

Everything (markup, styles, and logic) is contained in a single HTML file.

Usage

Clone or download the repository.
Open index.html in any modern web browser.
No server, build tool, or framework is required.

Implementation Notes

Uses position: fixed for reliable viewport-relative snapping.
Snap logic is evaluated live during drag and resize operations.
Window state is preserved before snap and maximize operations to allow correct restoration.
Canvas dimensions are explicitly synchronized with the window size to ensure correct rendering.
No external libraries or browser-specific APIs are used.

Browser Compatibility

Works in all modern browsers that support:

ES6 JavaScript
CSS Flexbox
Pointer and mouse events
backdrop-filter (optional visual enhancement)

Intended Use

This project is intended as:

A reference implementation for custom window managers
A prototype for desktop-like web user interfaces
A base for further experimentation (multiple windows, docking systems, tiling layouts)

License

MIT

2.2 KiB Raw Permalink Blame History