{"id":14978503,"url":"https://github.com/el3um4s/electron-window","last_synced_at":"2026-02-01T03:02:42.619Z","repository":{"id":65372051,"uuid":"529817588","full_name":"el3um4s/electron-window","owner":"el3um4s","description":"Electron - create a window with optional autoupdater and browserview","archived":false,"fork":false,"pushed_at":"2023-02-04T16:09:10.000Z","size":1284,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-08T15:47:09.571Z","etag":null,"topics":["browser","browser-view","browserview","electron","electron-browser","electron-browser-window","electron-window","electronjs","npm","typescript","window"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/el3um4s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["el3um4s"],"patreon":"el3um4s","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/el3um4s"]}},"created_at":"2022-08-28T09:32:39.000Z","updated_at":"2022-10-14T18:52:18.000Z","dependencies_parsed_at":"2023-02-08T08:46:51.071Z","dependency_job_id":null,"html_url":"https://github.com/el3um4s/electron-window","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":"el3um4s/typescript-npm-package-starter","purl":"pkg:github/el3um4s/electron-window","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el3um4s%2Felectron-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el3um4s%2Felectron-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el3um4s%2Felectron-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el3um4s%2Felectron-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/el3um4s","download_url":"https://codeload.github.com/el3um4s/electron-window/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/el3um4s%2Felectron-window/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28965436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-01T02:14:24.993Z","status":"ssl_error","status_checked_at":"2026-02-01T02:13:55.706Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","browser-view","browserview","electron","electron-browser","electron-browser-window","electron-window","electronjs","npm","typescript","window"],"created_at":"2024-09-24T13:57:48.455Z","updated_at":"2026-02-01T03:02:42.601Z","avatar_url":"https://github.com/el3um4s.png","language":"TypeScript","funding_links":["https://github.com/sponsors/el3um4s","https://patreon.com/el3um4s","https://www.paypal.me/el3um4s"],"categories":[],"sub_categories":[],"readme":"# Electron Window\n\nElectron - create a window with optional autoupdater and browserview\n\nNPM link: [@el3um4s/electron-window](https://www.npmjs.com/package/@el3um4s/electron-window)\n\n### Install and use the package\n\nTo use the package in a project:\n\n```bash\nnpm i @el3um4s/electron-window\n```\n\nThen in a file:\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\nimport windowControls from \"@el3um4s/renderer-for-electron-window-controls\";\n\nconst createWindow = async (options: {\n  url: string;\n  preload: string;\n  themeSource?: \"system\" | \"light\" | \"dark\";\n  settings?: Electron.BrowserWindowConstructorOptions;\n}): Promise\u003cElectronWindow\u003e =\u003e {\n  let window: ElectronWindow;\n\n  const { url, themeSource = \"system\", preload } = options;\n\n  const settings = {\n    ...options?.settings,\n    title: \"GEST DASHBOARD\",\n  };\n  window = new ElectronWindow(settings);\n\n  window.createWindow({ url, themeSource, preload });\n\n  await window.setIpcMain([windowControls]);\n\n  await window.addBrowserViewHidden();\n  await window.setIpcMainView([windowControls]);\n\n  window.addAutoUpdater();\n  return window;\n};\n\nlet electronWindow: ElectronWindow;\n\nelectronWindow = await createWindow({\n  url,\n  preload,\n  themeSource: \"light\",\n  settings: {\n    x: Math.floor(Math.random() * 64),\n    y: Math.floor(Math.random() * 64),\n  },\n});\n```\n\nTo use in the renderer install:\n\n```bash\nnpm i @el3um4s/electron-window @el3um4s/renderer-electron-window-browser-view  @el3um4s/ipc-for-electron\n```\n\nThen in the preload file:\n\n```ts\nimport { generateContextBridge } from \"@el3um4s/ipc-for-electron\";\nimport { browserView } from \"@el3um4s/electron-window\";\n\nconst listAPI = [browserView];\n\ngenerateContextBridge(listAPI, \"ipc\");\n```\n\nThen in the renderer:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.openInBrowserView({ url: \"https://www.google.com\", apiKey: \"ipc\" });\n\nbrowserView.showBrowserView({\n  bounds: {\n    paddingLeft: 64,\n    paddingTop: 64,\n    paddingRight: 128,\n    paddingBottom: 128,\n  },\n  apiKey: \"ipc\",\n});\n\nbrowserView.on.browserViewCanBeShowed({\n  callback: (data) =\u003e {\n    console.log(data);\n  },\n});\n```\n\n### API: main process\n\n`new ElectronWindow(settings?: Electron.BrowserWindowConstructorOptions):ElectronWindow`: create a new instance of ElectronWindow\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nconst settings = {\n  title: \"GEST DASHBOARD\",\n  backgroundColor: \"red\",\n};\n\nwindow = new ElectronWindow(settings);\n```\n\n`createWindow(options?: CreateWindow): BrowserWindow`: create a new window\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nconst options = {\n  url: \"https://www.google.com\",\n  themeSource: \"light\",\n  preload: \"path/to/preload.js\",\n};\n\nwindow = new ElectronWindow();\nwindow.createWindow(options);\n```\n\n`loadUrl(url: string): void`: load a new url in the window\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nconst options = {\n  url: \"https://www.google.com\",\n  themeSource: \"light\",\n  preload: \"path/to/preload.js\",\n};\n\nwindow = new ElectronWindow();\nwindow.createWindow(options);\n\nwindow.loadUrl(\"https://www.youtube.com\");\n```\n\n`async setIpcMain(api: Array\u003cIPC\u003e): Promise\u003cvoid\u003e`: set the ipcMain for the window\n\nUse `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron)) to set the ipcMain for the window\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\nimport windowControls from \"@el3um4s/renderer-for-electron-window-controls\";\n\nlet window: ElectronWindow;\n\nwindow = new ElectronWindow();\nwindow.createWindow();\n\nconst listAPI = [windowControls];\nawait window.setIpcMain(listAPI);\n```\n\n`async addAutoUpdater(): Promise\u003cvoid\u003e`: add the autoUpdater to the window\n\nIf you want to use the autoupdater, you need to install\n\n- `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))\n- `el3um4s/ipc-for-electron-auto-updater` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))\n- `el3um4s/renderer-for-electron-auto-updater` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))\n\n```bash\nnpm i @el3um4s/electron-window @el3um4s/ipc-for-electron @el3um4s/ipc-for-electron-auto-updater @el3um4s/renderer-for-electron-auto-updater\n```\n\nIn the main process:\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nwindow = new ElectronWindow();\nwindow.createWindow();\n\nwindow.addAutoUpdater();\n```\n\nIn the preload file:\n\n```ts\nimport { generateContextBridge } from \"@el3um4s/ipc-for-electron\";\nimport autoUpdater from \"@el3um4s/ipc-for-electron-auto-updater\";\n\nconst listAPI = [autoUpdater];\n\ngenerateContextBridge(listAPI, \"ipc\");\n```\n\n`async addBrowserView(options?: CreateBrowserView): Promise\u003cvoid\u003e`: add a browserView to the window\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nwindow = new ElectronWindow();\nwindow.createWindow();\n\nconst options = {\n  url: \"https://www.google.com\",\n  preload: \"path/to/preload.js\",\n  bounds: {\n    paddingLeft: 64,\n    paddingTop: 64,\n    paddingRight: 64,\n    paddingBottom: 64,\n  },\n};\n\nawait window.addBrowserView(options);\n```\n\n`async addBrowserViewHidden(options?: CreateBrowserView): Promise\u003cvoid\u003e`: add a browserView to the window and hide it\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\n\nlet window: ElectronWindow;\n\nwindow = new ElectronWindow();\nwindow.createWindow();\n\nconst options = {\n  url: \"https://www.google.com\",\n  preload: \"path/to/preload.js\",\n};\n\nawait window.addBrowserViewHidden(options);\n```\n\n`async setIpcMainView(api: Array\u003cIPC\u003e): Promise\u003cvoid\u003e`: set the ipcMain for the browserView\n\nUse `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron)) to set the ipcMain for the window\n\n```ts\nimport ElectronWindow from \"@el3um4s/electron-window\";\nimport systemInfo from \"@el3um4s/ipc-for-electron-system-info\";\n\nlet window: ElectronWindow;\n\nwindow = new ElectronWindow();\nwindow.createWindow();\n\nconst options = {\n  url: \"https://www.google.com\",\n  preload: \"path/to/preload.js\",\n};\n\nawait window.addBrowserViewHidden(options);\n\nconst listAPI = [systemInfo];\nawait window.setIpcMainView(listAPI);\n```\n\n### API: browserView - Electron Side\n\n- `openInBrowserView`: open the url in the browserView.\n- `showBrowserView`: show the browserView. The response is sent to the `showBrowserView` channel.\n- `resizeBrowserViewToMaximized`: resize the browserView to the maximized size.\n- `resizeBrowserViewToUnMaximized`: resize the window to the un-maximized size.\n- `removeBrowserView`: remove the browserView.\n- `openBrowserViewDevTools`: open the devTools of the browserView.\n- `printBrowserView`: print the browserView.\n- `goBackBrowserView`: go back in the browserView.\n- `goForwardBrowserView`: go forward in the browserView.\n- `reloadCurrentPageBrowserView`: reload the current page in the browserView.\n\n### API: browserView - Renderer Side\n\n`on.browserViewCanBeShowed = async (options: { callback?: (arg0: boolean) =\u003e void; apiKey?: string; }): Promise\u003cboolean\u003e`\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.openInBrowserView({ url: \"https://www.google.com\", apiKey: \"ipc\" });\n\nbrowserView.showBrowserView({\n  bounds: {\n    paddingLeft: 64,\n    paddingTop: 64,\n    paddingRight: 128,\n    paddingBottom: 128,\n  },\n  apiKey: \"ipc\",\n});\n\nbrowserView.on.browserViewCanBeShowed({\n  callback: (data) =\u003e {\n    console.log(data);\n  },\n});\n```\n\n`showBrowserView = async (options: { callback?: (arg0: boolean) =\u003e void; apiKey?: string; bounds?: BrowserViewBounds; }): Promise\u003cboolean\u003e`: show the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.openInBrowserView({ url: \"https://www.google.com\", apiKey: \"ipc\" });\n\nbrowserView.showBrowserView({\n  bounds: {\n    paddingLeft: 64,\n    paddingTop: 64,\n    paddingRight: 128,\n    paddingBottom: 128,\n  },\n  apiKey: \"ipc\",\n  callback: (data) =\u003e {\n    console.log(\n      data ? \"BrowserView can be shown\" : \"BrowserView can't be shown\"\n    );\n  },\n});\n```\n\n`openInBrowserView = (options: { apiKey?: string; url: string }): void`: open the url in the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.openInBrowserView({ url: \"https://www.google.com\", apiKey: \"ipc\" });\n```\n\n`resizeBrowserViewToMaximized = (options?: { apiKey?: string; bounds?: BrowserViewBounds; }): void`: resize the browserView to the maximized size\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nconst bounds: {\n  paddingLeft: 64;\n  paddingTop: 64;\n  paddingRight: 64;\n  paddingBottom: 64;\n};\n\nbrowserView.resizeBrowserViewToMaximized({ bounds, apiKey: \"ipc\" });\n```\n\n`resizeBrowserViewToUnMaximized = (options?: { apiKey?: string; bounds?: BrowserViewBounds; }): void`: resize the browserView to the un-maximized size\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nconst bounds: {\n  paddingLeft: 64;\n  paddingTop: 64;\n  paddingRight: 64;\n  paddingBottom: 64;\n};\n\nbrowserView.resizeBrowserViewToUnMaximized({ bounds });\n```\n\n`removeBrowserView = (options?: { apiKey?: string }): void`: remove the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.removeBrowserView({ apiKey: \"ipc\" });\n```\n\n`openBrowserViewDevTools = (options?: { apiKey?: string }): void`: open the dev tools window of the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.openBrowserViewDevTools();\n```\n\n`printBrowserView = (options?: { apiKey?: string }): void`: print the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.printBrowserView();\n```\n\n`goBackBrowserView = (options?: { apiKey?: string }): void`: go back in the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.goBackBrowserView();\n```\n\n`goForwardBrowserView = (options?: { apiKey?: string }): void`: go forward in the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.goForwardBrowserView();\n```\n\n`reloadCurrentPageBrowserView = (options?: { apiKey?: string }): void`: reload the current page in the browserView\n\nexample:\n\n```ts\nimport browserView from \"@el3um4s/renderer-electron-window-browser-view\";\n\nbrowserView.reloadCurrentPageBrowserView();\n```\n\n### Default settings\n\n```ts\nconst defaultSettings = {\n  title: appName,\n  width: 854,\n  height: 480,\n  frame: false,\n  backgroundColor: \"#FFF\",\n};\n```\n\n### Interfaces\n\n**CreateWindow**\n\n```ts\ninterface CreateWindow {\n  url: string;\n  iconPath?: string;\n  preload?: string;\n  themeSource?: \"system\" | \"light\" | \"dark\";\n}\n```\n\n**CreateBrowserView**\n\n```ts\ninterface CreateBrowserView {\n  url?: string;\n  preload?: string;\n  bounds?: BrowserViewBounds;\n}\n```\n\n**BrowserViewBounds**\n\n```ts\ninterface BrowserViewBounds {\n  paddingLeft?: number;\n  paddingTop?: number;\n  paddingRight?: number;\n  paddingBottom?: number;\n  show?: boolean;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fel3um4s%2Felectron-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fel3um4s%2Felectron-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fel3um4s%2Felectron-window/lists"}