Representing Files in a BrowserWindow

Overview

On macOS, you can set a represented file for any window in your application. The represented file’s icon will be shown in the title bar, and when users Command-Click or Control-Click, a popup with a path to the file will be shown.

Represented File

NOTE: The screenshot above is an example where this feature is used to indicate the currently opened file in the Atom text editor.

You can also set the edited state for a window so that the file icon can indicate whether the document in this window has been modified.

To set the represented file of window, you can use the BrowserWindow.setRepresentedFilename and BrowserWindow.setDocumentEdited APIs.

Example

docs/fiddles/features/represented-file (27.0.1)Open in Fiddle

  • main.js
  • index.html
  1. const { app, BrowserWindow } = require('electron')
  2. const os = require('node:os')
  4. function createWindow () {
  5.   const win = new BrowserWindow({
  6.     width: 800,
  7.     height: 600
  8.   })
  10.   win.loadFile('index.html')
  11. }
  13. app.whenReady().then(() => {
  14.   const win = new BrowserWindow()
  16.   win.setRepresentedFilename(os.homedir())
  17.   win.setDocumentEdited(true)
  18. })
  20. app.on('window-all-closed', () => {
  21.   if (process.platform !== 'darwin') {
  22.     app.quit()
  23.   }
  24. })
  26. app.on('activate', () => {
  27.   if (BrowserWindow.getAllWindows().length === 0) {
  28.     createWindow()
  29.   }
  30. })
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7.     <link rel="stylesheet" type="text/css" href="./styles.css">
  8. </head>
  9. <body>
  10.     <h1>Hello World!</h1>
  11.     <p>
  12.       Click on the title with the <pre>Command</pre> or <pre>Control</pre> key pressed.
  13.       You should see a popup with the represented file at the top.
  14.     </p>
  15.   </body>
  16. </body>
  17. </html>

After launching the Electron application, click on the title with Command or Control key pressed. You should see a popup with the represented file at the top. In this guide, this is the current user’s home directory:

Represented file