how to make resizable frameless window #1591

phphackerr · 2025-02-04T15:30:52Z

phphackerr
Feb 4, 2025

i dont understand how to do this

import webview


webview.create_window('Hello world', 'http://localhost:5173/',
                      resizable=True, frameless=True, easy_drag=True)
webview.start()

and one more question, why not make a discord server?

Answered by r0x0r

Feb 6, 2025

Frameless windows are not resizable. However, this feature requests comes again and again, so maybe this custom behaviour should be implemented. Feel free to contribute.

I am not on Discord, but I have been thinking of creating an alternative communication channel.

View full answer

r0x0r · 2025-02-06T09:26:00Z

r0x0r
Feb 6, 2025
Maintainer

Frameless windows are not resizable. However, this feature requests comes again and again, so maybe this custom behaviour should be implemented. Feel free to contribute.

I am not on Discord, but I have been thinking of creating an alternative communication channel.

1 reply

phphackerr Feb 6, 2025
Author

yeah, it would be really cool if you introduced this feature.
im new to programming, its too early for me to become a contributor

i hope this will be introduced and will be introduced as soon as possible

initiateit · 2025-08-16T02:48:58Z

initiateit
Aug 16, 2025

I came across this as i wanted frameless and resize, the thinking is:

JS
Detect keyboard events (keydown listener)
Call Python functions via pywebview.api.resize_window(width, height)

Py
Receives resize requests from JavaScript
Calls native OS window APIs to actually resize the window

So for my use case keyboard resize is fine, (though just as easily could use css regions to enable mouse resizing mousedown, mousemove, mouseup) and enable units of 50px as resize bound to Ctrl and Ctrl + Alt to the -/_ =+ keys:

test.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Resize Test</title>
</head>
<body>
  <h1>Resize Test</h1>
  <p>Use Ctrl +/- to resize</p>
  
  <script>
    document.addEventListener('keydown', function(e) {
      if (e.ctrlKey || e.metaKey) {
        switch(e.key) {
          case '=':
          case '+':
            e.preventDefault();
            if (e.altKey) {
              resizeAxisBy('width', -50);
            } else {
              resizeAxisBy('width', 50);
            }
            break;
          case '-':
            e.preventDefault();
            if (e.altKey) {
              resizeAxisBy('height', -50);
            } else {
              resizeAxisBy('height', 50);
            }
            break;
          case '0':
            e.preventDefault();
            resizeWindowTo(500, 600);
            break;
        }
      }
    });

    async function resizeAxisBy(axis, delta) {
      try {
        const currentSize = await pywebview.api.get_window_size();
        let newWidth = currentSize.width;
        let newHeight = currentSize.height;

        if (axis === 'width') {
          newWidth = Math.max(currentSize.width + delta, 300);
        } else if (axis === 'height') {
          newHeight = Math.max(currentSize.height + delta, 300);
        }

        await pywebview.api.resize_window(newWidth, newHeight);
      } catch (e) {
          console.log(e)
      }
    }

    async function resizeWindowTo(width, height) {
      try {
        await pywebview.api.resize_window(width, height);
      } catch (e) {
          console.log(e)
      }
    }
  </script>
</body>
</html>

test.py

import webview

class Api:
    def __init__(self):
        self.window = None
        
    def set_window(self, window):
        self.window = window
        
    def get_window_size(self):
        if self.window:
            try:
                return {"width": self.window.width, "height": self.window.height}
            except:
                return {"width": 500, "height": 600}
        return {"width": 500, "height": 600}
    
    def resize_window(self, width, height):
        if self.window:
            try:
                self.window.resize(width, height)
                return True
            except:
                return False
        return False

if __name__ == "__main__":
    api = Api()
    window = webview.create_window(
        "Resizable Demo",
        "index.html",
        width=500,
        height=600,
        frameless=True,
        resizable=True
    )
    
    # Set window reference and expose API
    api.set_window(window)
    window.expose(api.resize_window)
    window.expose(api.get_window_size)
    
    webview.start()

Totally gross I know!

0 replies

unigrated-solutions · 2025-10-01T02:01:14Z

unigrated-solutions
Oct 1, 2025

I came up with this if anyone wants to check it out and give any tips or advice.

class WindowAPI:
    def __init__(self, window, title: str, on_quit=None, message_queue: queue.Queue = None):
        self.window = window
        self.title = title
        self.maximizer = create_maximizer(window, title)
        self.on_quit = on_quit
        self.message_queue = message_queue

    def on_loaded(self, win=None):
        """pywebview on_loaded event handler"""
        print("[WEBVIEW] DOM loaded, injecting global CSS/JS")
        self.insert_resize_handles()
    
    def minimize(self):
        self.window.minimize()

    def maximize(self):
        self.maximizer.toggle()

    def restore(self):
        self.window.restore()
        
    def close(self):
        self.window.hide()
    
    def resize(self, width, height, x=None, y=None):
        width, height = int(width), int(height)
        self.window.resize(width, height)

        if x is not None and y is not None:
            self.window.move(int(x), int(y))
        elif x is not None:
            self.window.move(int(x), self.window.y)
        elif y is not None:
            self.window.move(self.window.x, int(y))

    def set_bounds(self, x: int, y: int, width: int, height: int):
        self.window.move(int(x), int(y))
        self.window.resize(int(width), int(height))

    def quit(self):
        if callable(self.on_quit):
            self.on_quit()
        else:
            try:
                self.window.destroy()
            except Exception:
                pass

    def notify(self, payload: dict):
        print(f"[WEBVIEW] Notify requested: {payload}")
        if self.message_queue:
            self.message_queue.put(payload)

    def emit_event(self, name: str, detail: dict | None = None):
        """Emit a CustomEvent into the DOM so the page JS (NiceGUI) can handle it."""
        payload = json.dumps(detail or {})
        js = f'window.dispatchEvent(new CustomEvent("{name}", {{ detail: {payload} }}));'
        try:
            self.window.evaluate_js(js)
        except Exception as e:
            print(f"[WEBVIEW] Failed to emit event {name}: {e}\n")

    # === Injection ===
    def insert_resize_handles(self):
        """Insert CSS + JS into <head> only once."""
        try:
            self.window.evaluate_js("""
                (function(){
                    if (!document.querySelector('.resize-handle-style')) {
                        // CSS
                        const style = document.createElement('style');
                        style.className = 'resize-handle-style';
                        style.textContent = `
                            .resize-handle {
                                position: fixed;
                                background: transparent;
                                z-index: 9999;
                            }
                            .resize-handle.left   { left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
                            .resize-handle.right  { right: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
                            .resize-handle.bottom { left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
                        `;
                        document.head.appendChild(style);

                        // JS
                        const script = document.createElement('script');
                        script.className = 'resize-handle-script';
                        script.textContent = `
                            let resizing = false;
                            let resizeDir = null;
                            let startX, startY, startWidth, startHeight, startWinX, startWinY;
                            const MIN_W = 400, MIN_H = 300;

                            function startResize(dir, e) {
                                resizing = true;
                                resizeDir = dir;
                                startX = e.clientX;
                                startY = e.clientY;
                                startWidth = window.innerWidth;
                                startHeight = window.innerHeight;
                                startWinX = window.screenX;
                                startWinY = window.screenY;
                                document.addEventListener('mousemove', doResize);
                                document.addEventListener('mouseup', stopResize);
                            }

                            function doResize(e) {
                                if (!resizing) return;
                                let newW = startWidth, newH = startHeight, newX = startWinX, newY = startWinY;
                                if (resizeDir === 'left') {
                                    const rightEdge = startWinX + startWidth;
                                    newX = e.screenX;
                                    newW = Math.max(MIN_W, rightEdge - newX);
                                    if (newW === MIN_W) newX = rightEdge - MIN_W;
                                } else if (resizeDir === 'right') {
                                    newW = Math.max(MIN_W, startWidth + (e.clientX - startX));
                                } else if (resizeDir === 'bottom') {
                                    newH = Math.max(MIN_H, startHeight + (e.clientY - startY));
                                }
                                if (window.pywebview?.api?.set_bounds) {
                                    window.pywebview.api.set_bounds(newX, newY, newW, newH);
                                }
                            }

                            function stopResize() {
                                resizing = false;
                                document.removeEventListener('mousemove', doResize);
                                document.removeEventListener('mouseup', stopResize);
                            }

                            // Create handles
                            if (!document.querySelector('.resize-handle')) {
                                const left = document.createElement('div');
                                left.className = 'resize-handle left';
                                left.onmousedown = e => startResize('left', e);

                                const right = document.createElement('div');
                                right.className = 'resize-handle right';
                                right.onmousedown = e => startResize('right', e);

                                const bottom = document.createElement('div');
                                bottom.className = 'resize-handle bottom';
                                bottom.onmousedown = e => startResize('bottom', e);

                                document.body.appendChild(left);
                                document.body.appendChild(right);
                                document.body.appendChild(bottom);
                            }

                        `;
                        document.head.appendChild(script);
                    }
                })();
            """)
        except Exception as e:
            print(f"[WEBVIEW] Failed to inject global head: {e}")

I posted an example application using nicegui but it has several other things specific to my use case that probably adds several additional complications like OS notifications and system tray icons that are not related to this discussion. I'd like some feedback on how I'm resizing the window though.

https://github.com/unigrated-solutions/example-pywebview-nicegui-tray

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

how to make resizable frameless window #1591

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

how to make resizable frameless window #1591

Uh oh!

Uh oh!

phphackerr Feb 4, 2025

Replies: 3 comments · 1 reply

Uh oh!

r0x0r Feb 6, 2025 Maintainer

Uh oh!

phphackerr Feb 6, 2025 Author

Uh oh!

initiateit Aug 16, 2025

Uh oh!

unigrated-solutions Oct 1, 2025

phphackerr
Feb 4, 2025

Replies: 3 comments 1 reply

r0x0r
Feb 6, 2025
Maintainer

phphackerr Feb 6, 2025
Author

initiateit
Aug 16, 2025

unigrated-solutions
Oct 1, 2025