{"id":22316444,"url":"https://github.com/fruitsalad/electron-custom-window-example","last_synced_at":"2026-04-28T22:34:39.919Z","repository":{"id":259442420,"uuid":"877847469","full_name":"Fruitsalad/electron-custom-window-example","owner":"Fruitsalad","description":"An example app showing how to make custom window decorations in Electron.","archived":false,"fork":false,"pushed_at":"2024-10-25T05:12:05.000Z","size":834,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T01:51:44.415Z","etag":null,"topics":["electron","electron-forge","example"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Fruitsalad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-24T10:51:04.000Z","updated_at":"2024-10-25T05:12:09.000Z","dependencies_parsed_at":"2024-10-25T12:56:09.345Z","dependency_job_id":"06e5d26e-b256-4643-a5da-352e61fd0ced","html_url":"https://github.com/Fruitsalad/electron-custom-window-example","commit_stats":null,"previous_names":["fruitsalad/electron-custom-window-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fruitsalad%2Felectron-custom-window-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fruitsalad%2Felectron-custom-window-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fruitsalad%2Felectron-custom-window-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fruitsalad%2Felectron-custom-window-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fruitsalad","download_url":"https://codeload.github.com/Fruitsalad/electron-custom-window-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245581597,"owners_count":20639002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["electron","electron-forge","example"],"created_at":"2024-12-03T23:06:36.537Z","updated_at":"2026-04-28T22:34:39.890Z","avatar_url":"https://github.com/Fruitsalad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![](example_screenshot.png)\n\n# Custom window example for Electron\n***An example app showing how to make custom window decorations in Electron***\n\nThis is an example of an Electron app that has a custom titlebar as well as\ncross-platform window resizing in a transparent window.\nFor resizing, it uses custom (\"fake\") resizing borders, implemented in\nCSS \u0026 Javascript. This is necessary because Electron on Windows\ndoes not support resizing\ntransparent windows.\nOn other operating systems the app uses OS-native\nresizing, but the custom resize borders are still enabled because they don't get\nin the way, in my experience.\n\nFor this example app, the window transparency is used to add\nrounded corners to the window.\n\nThis example app only implements Windows-style window controls\n(which are also pretty common on Linux).\nThe MacOS-style “traffic light” window controls are not included in this\nexample.\nHowever, if you're handy with HTML \u0026 CSS\nyou can customize the provided window controls into MacOS-style\ncontrols without too much work.\nAs it is, the example should *work* for all operating systems,\nalthough it might not be appropriately styled.\n\nBeware: Because Electron tells Windows that this app cannot be resized\n(since it's transparent), you won't be able to use hotkeys like `Windows + Left`\nto tile the window on the left side of the screen, and tiling the window by\ndragging it to a side of the screen won't work either.\nThis should only be a problem on Windows, I can personally attest\nthat these things work fine on Linux.\n\n\n## Usage\n\nTo run the app:\n```shell\nnpm install  # Install the dependencies\nnpm start  # Run the app\n```\n\n\n## Directory structure\n\n```\n.\n│  The root folder contains mostly configuration files for NPM, Electron Forge,\n│  Vite and Typescript. Those files aren't very interesting.\n│\n├── README.md\n│     The file you're reading right now!\n├── LICENSE.md\n│     Some copyright law stuff. You can freely use the example code.\n├── index.html\n│     The HTML of the app.\n├── assets\n│     This folder contains CSS files \u0026 fonts.\n└── src\n    ├── main.ts\n    │     Electron's main process. Mainly creates the app's window and handles\n    │     things like resizing the window.\n    ├── preload.ts\n    │     This script adds some functions that the renderer can later use to\n    │     communicate with the main process.\n    ├── renderer.ts\n    │     Electron renderer. This code adds functionality to the HTML, such as\n    │     making all of the window controls work. \n    ├── drag_resize.ts\n    │     The logic for the custom window-resizing borders\n    ├── explode.ts\n    │     A completely unnecessary particle effect (for nice polish)\n    └── vec2.ts\n          A small custom 2D vector class, see \"Vectors\" section of README.md\n```\n\n\n## Vectors\n\nIn the code I make regular use of vectors and I thought it would be best to\nclarify.\n\nI have a bit of experience in game development and because of that I'm now\nconvinced that all Cartesian coordinates\n(that is: all coordinates with some kind of `x` \u0026 `y` properties)\nand differences in coordinates (such as size, offset and movement)\nshould pretty much always be stored in a\nvector.\nNotably, by \"vector\" I mean the linear algebra kind of vector, not the C++ kind\nof vector.\n\nVectors let you turn most simple geometry operations into one-liners —\nit's a lot more convenient than always working with `x` \u0026 `y`\nindividually.\nOf course a whole linear algebra library is pretty overkill when I only\nneed a 2D vector, so I made my own small implementation and put it in\n[src/vec2.ts](src/vec2.ts).\n\nHere's how to calculate the distance between two points with vectors:\n```js\nconst first_point = vec2(0.5, 0.5);\nconst second_point = vec2(5, 10);\n// In the line below `sub` is short for \"subtract\" (which gives the difference\n// between the two points). Unfortunately Javascript doesn't support custom \n// operator overloads, so we can't use the nicer \"-\" syntax :(\nconst distance = sub(first_point, second_point).length();\n```\nHere's the equivalent without vectors:\n```js\nconst first_point = [0.5, 0.5];\nconst second_point = [5, 10];\nconst difference = [\n    first_point[0] - second_point[0],\n    first_point[1] - second_point[1]\n];\n// This is Pythagoras' theorem, for people who have forgotten their geometry:\nconst distance =\n    Math.sqrt(difference[0]*difference[0] + difference[1]*difference[1]);\n```\nThese two implementations internally do pretty much the same thing,\nbut the example with vectors just has nicer syntax (in my opinion).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffruitsalad%2Felectron-custom-window-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffruitsalad%2Felectron-custom-window-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffruitsalad%2Felectron-custom-window-example/lists"}