Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/window/llms.txt

Use this file to discover all available pages before exploring further.

Window requires no package manager, no bundler, and no framework — just three files and a browser. Follow the steps below and you will have a fully interactive, draggable macOS-style window running locally in minutes.
1

Copy the files

The entire component lives in three files. Create a new folder and add each one.
  • index.html — the page shell and window DOM structure
  • style.css — all visual styling, including dark-mode support
  • script.js — drag and close behaviour
Start with index.html. Copy the markup below exactly as shown — it wires up the stylesheet and script, and provides the #window-container, #title-bar, and #window-content elements that the JavaScript targets by ID.
index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Window</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="favicon.png">
    </head>
    <body>
        <div id="window-container">
            <div id="title-bar">
                <div id="window-buttons">
                    <span class="btn close" id="close"></span>
                    <span class="btn mini"></span>
                    <span class="btn maxi"></span>
                </div>
            </div>
            <div id="window-content">
                <button>Click me</button>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>
Then copy style.css and script.js from the repository into the same folder so that the relative paths in index.html resolve correctly.
2

Open in your browser

Open index.html directly in any modern browser — no local server needed.
open index.html        # macOS
start index.html       # Windows
xdg-open index.html    # Linux
You should see a white, rounded window centred on a soft gradient background. In dark mode the background and window chrome switch to dark colours automatically.
If the styles or script do not load, confirm that style.css and script.js are in the same directory as index.html.
3

Drag the window

Click and hold anywhere on the title bar — the strip at the top of the window containing the three coloured circles — then move the mouse. The window follows your cursor in real time. Release the mouse button to drop the window in its new position.
Dragging is scoped to the title bar. Clicking inside #window-content does not initiate a drag.
4

Close the window

Click the red circle on the left side of the title bar. The window and its title bar are immediately hidden. This maps to the #close element in the markup and is handled by the click listener in script.js.

​
Replace the placeholder content

The #window-content div ships with a single <button>Click me</button> as a placeholder. Replace it with any HTML you like — text, images, forms, or other components.
index.html
<!-- Before -->
<div id="window-content">
    <button>Click me</button>
</div>

<!-- After: custom content example -->
<div id="window-content">
    <h2>Hello, Window!</h2>
    <p>Add any HTML content here.</p>
    <a href="https://example.com">Learn more</a>
</div>
The content area is 400px tall and centres its children both vertically and horizontally using flexbox, so short content will always appear in the middle of the panel without any extra CSS.

​
What’s next

Embedding

Learn how to drop the Window component into an existing page alongside other content.

Customization

Change the window’s size, colours, border radius, and shadow to match your design.

Dark Mode

Understand how the built-in dark-mode media query works and how to extend it.

Build docs developers (and LLMs) love

Get started for freeTalk to us