Frameless window

Frameless window requires node-webkit >= v0.3.0

A frameless window is a window without standard frames and window buttons, usually you would use a frameless window to custom titlebar and other standard window buttons. To have a quick glance of it, you can visit the frameless-window and webgl demo in zcbenz/nw-sample-apps.

Enable frameless window

To make your window frameless, you just need to add "frame": false in your app's package.json's window field:

{
  "window": {
    "frame": false
  }
}

then your main window and windows opened by window.open will have no frames.

Make your window draggable

By default, the frameless window is non-draggable. The app needs to use -webkit-app-region: drag to specify the draggable region and use -webkit-app-region: no-drag to exclude the non-draggable area from the draggable region. Note that only rectangular shape is currently supported.

To make the whole window draggable, you can add -webkit-app-region: drag as body's style:

<body style="-webkit-app-region: drag">
</body>

And note that if you have made the whole window draggable, you must also mark buttons and custom window buttons as non-draggable, otherwise it would be very hard for users to click on them:

button {
  -webkit-app-region: no-drag;
}

If you're only using a custom titlebar, you also need to make buttons in titlebar non-draggable.

Text selection

One thing on frameless window is that the dragging behaviour may conflict with selecting text, for example, when you drag the titlebar, you may accidentally select the text on titlebar. To prevent this, you need to disable text selection on dragging area like this:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

And also remember not to mark text area as draggable.

nwjs/nw.js

HTTPS clone URL

Subversion checkout URL

Frameless window

Pages 80

Clone this wiki locally

Enable frameless window

Make your window draggable

Text selection