True borderless mode: hide top bar in full screen

Feature Requests
1

Feature request for product/service

Cursor IDE

Describe the request

Request: True Borderless Mode (Hide Top Bar in Full Screen)

Currently, Cursor’s Full Screen mode (F11) keeps the top bar always visible (window controls, model icons, settings, etc.).
This prevents a truly distraction-free, “borderless” experience where only the editor pane is visible, occupying the full screen.
Zen Mode and Centered Layout are not sufficient, as they only reduce some elements but never hide the top bar entirely.

Why this matters

  • Deep work and flow require a clean, distraction-free environment.
  • Useful for live coding, presentations, or minimal setups.
  • VS Code, Obsidian, and even Notepad++ provide a true borderless toggle — Cursor should too.

Expected behavior

  • Add a Borderless Mode toggle (via Command Palette, Appearance menu, or a shortcut).
  • When activated:
    • Hide all UI chrome (including the top bar and icons).
    • Show only the editor pane.
    • Optionally: auto-show the bar again on mouse hover or via a configurable shortcut.

Possible implementation

Approach A — UI Toggle

Add a global state for borderless and toggle a class at the root level:

// renderer/ui/store.ts
import { create } from "zustand";
export const useUiStore = create<{ borderless: boolean; toggle(): void }>((set, get) => ({
  borderless: false,
  toggle: () => set({ borderless: !get().borderless }),
}));

// renderer/App.tsx
import { useEffect } from "react";
import { useUiStore } from "./ui/store";
export function App() {
  const borderless = useUiStore(s => s.borderless);
  useEffect(() => {
    document.documentElement.classList.toggle("borderless-true", borderless);
  }, [borderless]);
  return /* rest of the app */;
}

/* borderless.css */
.borderless-true .topbar,
.borderless-true .toolbar,
.borderless-true .statusbar,
.borderless-true .sidebar,
.borderless-true .tabbar {
  display: none !important;
}
.borderless-true .editor-root {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: none;
}

Approach B — Window Level (Electron)

Use a frameless window and custom drag region:

// main.ts (Electron)
ipcMain.handle("ui:setBorderless", (_evt, on: boolean) => {
  win.setMenuBarVisibility(!on);
  // For macOS: hide traffic lights unless hovered
  win.setWindowButtonVisibility?.(!on);
});

/* Allow dragging even with hidden bar */
.borderless-true .drag-region {
  -webkit-app-region: drag;
  height: 28px;
}
.borderless-true button,
.borderless-true input {
  -webkit-app-region: no-drag;
}

Visual reference

(Attach screenshot here showing the top bar still visible in Full Screen mode)

Screenshot / Screen Recording

img.png

Operating System (if it applies)

Windows 10/11