svelte-windows

Window Management for Svelte

A draggable and resizable window manager that works seamlessly in your projects. Works in scroll areas, overflow situations, with intelligent window stacking.

Get Started View on GitHub

▲ npm install svelte-windows

See it in action

Drag, resize, and interact with windows. Everything you need for a desktop-like experience.

Anything can be behind the window manager.

Works with iframes

Documentation

Fully customizable and responsive.
Works on mobile devices.

Welcome

Drag me around! Click to bring to front.

Everything you need

Built for modern Svelte applications with performance and developer experience in mind.

Draggable

Smooth dragging with customizable constraints and boundaries. Works perfectly in scroll containers.

Resizable

Resize from any edge. Set minimum and maximum dimensions for your windows.

Smart Stacking

Automatic z-index management based on window activity. Recently active windows come to the front.

Responsive

Works seamlessly across devices and screen sizes. Handles overflow and scroll situations gracefully. Mobile users can drag windows.

Resource Friendly

Only uses the minimum amount of event listeners. 2 move events for the entire window manager scope (1 for mouse events and 1 for mobile touch events.)

Beginner Friendly

You can get started with as little as 17 lines of code, but you can endlessly customise the functionality.

Quick to install

Get started in seconds with npm or your favorite package manager.

npm install svelte-windows

Example.svelte

<script>
    import { WindowManager, Window } from "svelte-windows";

    const dragRegions = [{width:"100%",height:"100%",top:"0px",left:"0px"}]
</script>

<div style="width: 500px;height: 500px;">
    <WindowManager>
        {#snippet children(context)}
            <Window id="window1" {context} windowDragRegions={dragRegions}>
                <p>Nice Window</p>
            </Window>
        {/snippet}
    </WindowManager>
</div>