Window IPC

Overview

The Window IPC namespace provides APIs for controlling browser windows, managing window state (maximized, minimized, fullscreen), and handling window operations. These APIs are available through the window.flow.windows and window.flow.interface objects.

Windows API

The window.flow.windows API provides window management and control operations.

Source Files

Interface: src/shared/flow/interfaces/app/windows.ts
Handler: src/main/ipc/app/window-controls.ts
Preload: src/preload/index.ts:759-784

Window Controls

minimizeCurrentWindow

() => void

Minimizes the current window.

Usage
Handler

window.flow.windows.minimizeCurrentWindow();

// src/main/ipc/app/window-controls.ts:24-29
ipcMain.on("window:minimize", (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  if (win) {
    win.minimize();
  }
});

This method works for any internal window type (browser windows, settings windows, etc.), not just browser windows.

maximizeCurrentWindow

() => void

Toggles maximize/restore on the current window.

Usage
Handler

// Toggle between maximized and normal state
window.flow.windows.maximizeCurrentWindow();

// src/main/ipc/app/window-controls.ts:32-41
ipcMain.on("window:maximize", (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  if (win) {
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  }
});

This method automatically detects the current state and toggles it. If the window is maximized, it restores; if it’s normal, it maximizes.

closeCurrentWindow

() => void

Closes the current window.

window.flow.windows.closeCurrentWindow();

This will close the window immediately. Make sure to save any unsaved data before calling this method.

Window State

getCurrentWindowState

() => Promise<WindowState>

Gets the current window’s state (maximized, fullscreen).

Usage
Handler

const state = await window.flow.windows.getCurrentWindowState();
console.log("Maximized:", state.isMaximized);
console.log("Fullscreen:", state.isFullscreen);

// src/main/ipc/app/window-controls.ts:52-58
ipcMain.handle("window:get-state", (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  if (win) {
    return {
      isMaximized: win.isMaximized(),
      isFullscreen: win.isFullScreen()
    };
  }
  return false;
});

isMaximized

boolean

Whether the window is maximized

isFullscreen

boolean

Whether the window is in fullscreen mode

onCurrentWindowStateChanged

IPCListener<[WindowState]>

Listens for window state changes on the current window.

Usage
React Hook

const unsubscribe = window.flow.windows.onCurrentWindowStateChanged((state) => {
  console.log("Window state changed:");
  console.log("  Maximized:", state.isMaximized);
  console.log("  Fullscreen:", state.isFullscreen);
});

// Later: clean up
unsubscribe();

import { useEffect, useState } from "react";

function useWindowState() {
  const [state, setState] = useState({ 
    isMaximized: false, 
    isFullscreen: false 
  });
  
  useEffect(() => {
    // Initial fetch
    window.flow.windows.getCurrentWindowState().then(setState);
    
    // Subscribe to changes
    const unsubscribe = window.flow.windows.onCurrentWindowStateChanged(setState);
    
    return unsubscribe;
  }, []);
  
  return state;
}

The window state change events are automatically attached to every window when it’s created. See src/main/ipc/app/window-controls.ts:62-75 for the implementation.

Settings Window

openSettingsWindow

() => void

Opens the settings window.

window.flow.windows.openSettingsWindow();

closeSettingsWindow

() => void

Closes the settings window.

window.flow.windows.closeSettingsWindow();

Interface API

The window.flow.interface API provides advanced window control and UI positioning.

Source Files

Interface: src/shared/flow/interfaces/browser/interface.ts
Handler: src/main/ipc/browser/interface.ts
Preload: src/preload/index.ts:514-572

Browser Window Controls

These methods are duplicates of window.flow.windows methods but scoped to the browser-specific interface API. They provide the same functionality.

minimizeWindow

() => void

Minimizes the window.

window.flow.interface.minimizeWindow();

maximizeWindow

() => void

Toggles maximize/restore on the window.

window.flow.interface.maximizeWindow();

closeWindow

() => void

Closes the window.

window.flow.interface.closeWindow();

getWindowState

() => Promise<WindowState>

Gets the window’s state.

const state = await window.flow.interface.getWindowState();

onWindowStateChanged

IPCListener<[WindowState]>

Listens for window state changes.

const unsubscribe = window.flow.interface.onWindowStateChanged((state) => {
  console.log("State:", state);
});

These methods are designed for popup windows created by web pages. They’re tightly secured and will only work in popup window contexts.

moveWindowBy

(x: number, y: number) => void

Moves the popup window by a relative amount.

// Move window 10px right, 5px down
window.flow.interface.moveWindowBy(10, 5);

number

required

Horizontal offset in pixels (positive = right, negative = left)

number

required

Vertical offset in pixels (positive = down, negative = up)

moveWindowTo

(x: number, y: number) => void

Moves the popup window to an absolute position.

// Move window to (100, 200) on screen
window.flow.interface.moveWindowTo(100, 200);

number

required

Horizontal position in pixels from the left edge of the screen

number

required

Vertical position in pixels from the top edge of the screen

resizeWindowBy

(width: number, height: number) => void

Resizes the popup window by a relative amount.

// Increase window size by 50px width, 30px height
window.flow.interface.resizeWindowBy(50, 30);

width

number

required

Width change in pixels (positive = larger, negative = smaller)

height

number

required

Height change in pixels (positive = larger, negative = smaller)

resizeWindowTo

(width: number, height: number) => void

Resizes the popup window to an absolute size.

// Resize window to 800x600
window.flow.interface.resizeWindowTo(800, 600);

width

number

required

New width in pixels

height

number

required

New height in pixels

Flow automatically polyfills the standard window.moveBy(), window.moveTo(), window.resizeBy(), and window.resizeTo() methods to use the IPC API:

// These standard methods work in Flow popup windows
window.moveBy(10, 5);
window.moveTo(100, 200);
window.resizeBy(50, 30);
window.resizeTo(800, 600);

See src/preload/index.ts:308-341 for the polyfill implementation.

Examples

Window Controls Component

import { useEffect, useState } from "react";

function WindowControls() {
  const [state, setState] = useState({ 
    isMaximized: false, 
    isFullscreen: false 
  });
  
  useEffect(() => {
    // Get initial state
    window.flow.windows.getCurrentWindowState().then(setState);
    
    // Subscribe to changes
    const unsubscribe = window.flow.windows.onCurrentWindowStateChanged(setState);
    
    return unsubscribe;
  }, []);
  
  return (
    <div className="window-controls">
      <button 
        onClick={() => window.flow.windows.minimizeCurrentWindow()}
        title="Minimize"
      >
        −
      </button>
      
      <button 
        onClick={() => window.flow.windows.maximizeCurrentWindow()}
        title={state.isMaximized ? "Restore" : "Maximize"}
      >
        {state.isMaximized ? "⧉" : "□"}
      </button>
      
      <button 
        onClick={() => window.flow.windows.closeCurrentWindow()}
        title="Close"
        className="close"
      >
        ×
      </button>
    </div>
  );
}

Fullscreen Toggle

import { useEffect, useState } from "react";

function FullscreenToggle() {
  const [isFullscreen, setIsFullscreen] = useState(false);
  
  useEffect(() => {
    const unsubscribe = window.flow.windows.onCurrentWindowStateChanged((state) => {
      setIsFullscreen(state.isFullscreen);
    });
    
    return unsubscribe;
  }, []);
  
  if (!isFullscreen) {
    return null;
  }
  
  return (
    <div className="fullscreen-banner">
      <p>Press ESC to exit fullscreen</p>
    </div>
  );
}

Responsive UI Based on Window State

import { useEffect, useState } from "react";

function ResponsiveUI() {
  const [windowState, setWindowState] = useState({ 
    isMaximized: false, 
    isFullscreen: false 
  });
  
  useEffect(() => {
    window.flow.windows.getCurrentWindowState().then(setWindowState);
    const unsubscribe = window.flow.windows.onCurrentWindowStateChanged(setWindowState);
    return unsubscribe;
  }, []);
  
  return (
    <div 
      className={`
        app-ui 
        ${windowState.isMaximized ? 'maximized' : 'normal'}
        ${windowState.isFullscreen ? 'fullscreen' : ''}
      `}
    >
      {windowState.isFullscreen && (
        <div className="fullscreen-controls">
          {/* Fullscreen-specific controls */}
        </div>
      )}
      
      {!windowState.isFullscreen && (
        <div className="normal-controls">
          {/* Normal window controls */}
        </div>
      )}
    </div>
  );
}

// This would run in a popup window created by window.open()
function PopupController() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [size, setSize] = useState({ width: 400, height: 300 });
  
  const handleMove = (direction: 'up' | 'down' | 'left' | 'right') => {
    const offset = 10;
    switch (direction) {
      case 'up':
        window.flow.interface.moveWindowBy(0, -offset);
        setPosition(p => ({ ...p, y: p.y - offset }));
        break;
      case 'down':
        window.flow.interface.moveWindowBy(0, offset);
        setPosition(p => ({ ...p, y: p.y + offset }));
        break;
      case 'left':
        window.flow.interface.moveWindowBy(-offset, 0);
        setPosition(p => ({ ...p, x: p.x - offset }));
        break;
      case 'right':
        window.flow.interface.moveWindowBy(offset, 0);
        setPosition(p => ({ ...p, x: p.x + offset }));
        break;
    }
  };
  
  const handleResize = (bigger: boolean) => {
    const delta = bigger ? 50 : -50;
    window.flow.interface.resizeWindowBy(delta, delta);
    setSize(s => ({ 
      width: s.width + delta, 
      height: s.height + delta 
    }));
  };
  
  return (
    <div className="popup-controller">
      <div className="position-controls">
        <button onClick={() => handleMove('up')}>↑</button>
        <button onClick={() => handleMove('down')}>↓</button>
        <button onClick={() => handleMove('left')}>←</button>
        <button onClick={() => handleMove('right')}>→</button>
      </div>
      
      <div className="size-controls">
        <button onClick={() => handleResize(true)}>Bigger</button>
        <button onClick={() => handleResize(false)}>Smaller</button>
      </div>
      
      <div className="info">
        <p>Position: {position.x}, {position.y}</p>
        <p>Size: {size.width} × {size.height}</p>
      </div>
    </div>
  );
}

Permissions

The Window API uses the following permission levels:

window.flow.windows.*

app

All window.flow.windows methods require “app” permission (available to Flow internal protocols and extension pages)

window.flow.interface.*

browser

Most window.flow.interface methods require “browser” permission (available to browser UI and omnibox)

moveWindowTo, resizeWindowTo

all

Popup window manipulation methods are available to all pages (special exception for popup window compatibility)

See the IPC Overview for more information about the permission system.

Type Definitions

WindowState

interface WindowState {
  isMaximized: boolean;   // Whether the window is maximized
  isFullscreen: boolean;  // Whether the window is in fullscreen mode
}

IPCListener

type IPCListener<T extends any[]> = (callback: (...args: T) => void) => () => void;

IPCListener functions:

Accept a callback function
Return an unsubscribe function
Automatically manage listener lifecycle

App IPC

Application information and utilities

Browser IPC

Browser profiles and tab management

IPC Overview

Learn about Flow’s IPC architecture

Interface API

Advanced window control and UI positioning

Core APIs

Controllers

Extensions

IPC

Overview

Windows API

Source Files

Window Controls

Window State

Settings Window

Interface API

Source Files

Browser Window Controls

Examples

Window Controls Component

Fullscreen Toggle

Responsive UI Based on Window State

Permissions

Type Definitions

WindowState

IPCListener

App IPC

Browser IPC

IPC Overview

Interface API

Build docs developers (and LLMs) love

Core APIs

Controllers

Extensions

IPC

​Overview

​Windows API

​Source Files

​Window Controls

​Window State

​Settings Window

​Interface API

​Source Files

​Browser Window Controls

​Popup Window Controls

​Popup Polyfills

​Examples

​Window Controls Component

​Fullscreen Toggle

​Responsive UI Based on Window State

​Popup Window Controller

​Permissions

​Type Definitions

​WindowState

​IPCListener

​Related APIs

App IPC

Browser IPC

IPC Overview

Interface API

Build docs developers (and LLMs) love

Overview

Windows API

Source Files

Window Controls

Window State

Settings Window

Interface API

Source Files

Browser Window Controls

Popup Window Controls

Popup Polyfills

Examples

Window Controls Component

Fullscreen Toggle

Responsive UI Based on Window State

Popup Window Controller

Permissions

Type Definitions

WindowState

IPCListener

Related APIs