{"id":17132702,"url":"https://github.com/araxeus/custom-electron-prompt","last_synced_at":"2026-03-02T20:30:59.361Z","repository":{"id":37819147,"uuid":"362261519","full_name":"Araxeus/custom-electron-prompt","owner":"Araxeus","description":"Custom prompt for electron made easy with various templates","archived":false,"fork":false,"pushed_at":"2024-11-01T06:36:54.000Z","size":556,"stargazers_count":16,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-21T20:23:10.178Z","etag":null,"topics":["accelerator","counter","dialog","electron","input","keybind","prompt","select"],"latest_commit_sha":null,"homepage":"https://araxeus.github.io/custom-electron-prompt/","language":"JavaScript","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/Araxeus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-04-27T21:56:46.000Z","updated_at":"2025-02-12T07:22:54.000Z","dependencies_parsed_at":"2024-06-19T01:58:43.653Z","dependency_job_id":null,"html_url":"https://github.com/Araxeus/custom-electron-prompt","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Araxeus%2Fcustom-electron-prompt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Araxeus%2Fcustom-electron-prompt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Araxeus%2Fcustom-electron-prompt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Araxeus%2Fcustom-electron-prompt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Araxeus","download_url":"https://codeload.github.com/Araxeus/custom-electron-prompt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670520,"owners_count":21142896,"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":["accelerator","counter","dialog","electron","input","keybind","prompt","select"],"created_at":"2024-10-14T19:27:54.587Z","updated_at":"2026-03-02T20:30:59.354Z","avatar_url":"https://github.com/Araxeus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ Custom Electron Prompt ✨\n\n[![NPM Version](https://img.shields.io/npm/v/custom-electron-prompt)](https://www.npmjs.com/package/custom-electron-prompt)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/Araxeus/custom-electron-prompt/blob/main/LICENSE)\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Araxeus/custom-electron-prompt)\n[![Website shields.io](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://araxeus.github.io/custom-electron-prompt)\n\nCustom prompt for Electron made easy with various templates\n\nThere are currently 5 types available: input / keybind / counter / select / multiInput\n\nThere is also an option for a button with user-defined `onclick` function.\n\n\n## Example of a Simple Prompt from Input Type\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Input/Input.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Input/InputDark.png)\n\n## Usage\n\n* 1: Install the npm package to your project directory with\n  ```bash\n  npm install custom-electron-prompt\n  ```\n  or\n  ```bash\n   yarn add custom-electron-prompt\n   ```\n  or\n  ```bash\n   bun add custom-electron-prompt\n   ```\n\n\n* 2: Import prompt\n\n  ```javascript\n  const prompt = require('custom-electron-prompt')\n  ```\n\n* 3: Create a prompt\n\n  ```javascript\n  prompt([options, parentBrowserWindow])\n  ```\n\n   calling the prompt function returns a Promise\n\n   Promise resolve returns the input or returns null if prompt was canceled\n\n       On error, Prompise reject returns custom error message\n\n### Simple Input Example\n\n```javascript\nconst prompt = require('./prompt');\n\nprompt({\n    title: 'Prompt example',\n    label: 'URL:',\n    value: 'http://example.org',\n    inputAttrs: {\n        type: 'url'\n    },\n    type: 'input'\n})\n.then((r) =\u003e {\n    if(r === null) {\n        console.log('user cancelled');\n    } else {\n        console.log('result', r);\n    }\n})\n.catch(console.error);\n```\n\n## Special Prompt Types\n\n----\n\n### keybind\n\nCreate a prompt with possibly multiple keybind selects\n\nMust specify `keybindOptions` with valid entries in format:\n\n```javascript\nkeybindOptions: [\n    { value: \"copyAccelerator\", label: \"Copy\", default: \"Ctrl+C\" }\n    { value: \"pasteAccelerator\", label: \"Paste\", default: \"Ctrl+V\" }\n]\n```\n\nReturn an array made of objects in format\n\n`{value: \"copyAccelerator\", accelerator: \"Ctrl+Shift+Insert\"}`\n\nwhere `accelerator` is the input for the `value` you registered\n\n \u003cdetails\u003e\n  \u003csummary\u003e Code Example \u003c/summary\u003e\n\n ```javascript\nconst kb = ($value, $label, $default) =\u003e { return { value: $value, label: $label, default: $default } };\nprompt({\n\ttitle: \"Keybinds\",\n\tlabel: \"Select keybind for each method\",\n\ttype: \"keybind\",\n\tvalue: \"2\", // Doesn't do anything here\n\tkeybindOptions: [\n\t\t{ value: \"volumeUp\", label: \"Increase Volume\", default: \"Shift+PageUp\" },\n\t\tkb(\"volumeDown\", \"Decrease Volume\", \"Shift+PageDown\"),\n\t\tkb(\"playPause\", \"Play / Pause\") // (empty string || undefined) == no default\n\t],\n\tresizable: true,\n\tcustomStylesheet: \"dark\",\n}, win).then(input =\u003e {\n\tif (input)\n\t\tinput.forEach(obj =\u003e console.log(obj))\n\telse\n\t\tconsole.log(\"Pressed Cancel\");\n})\n\t.catch(console.error)\n ```\n \u003c/details\u003e\n\n \u003cdetails\u003e\n  \u003csummary\u003e Screenshots \u003c/summary\u003e\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Keybind/Keybind3.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Keybind/Keybind.png)\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Keybind/KeybindDark3.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Keybind/KeybindDark.png)\n\u003c/details\u003e\n\n----\n\n### counter\n\nCreate a prompt for selecting numeric values, with integrated `+` and `-` buttons\n\nYou **can** specify `counterOptions` with valid entries in format:\n\n```javascript\ncounterOptions: {\n    minimum: 0, //defaults to null\n    maximum: 250, //defaults to null\n    multiFire: true //default to false\n}\n```\n\n minimum and maximum of numeric counter, and multifire indicate if continuous input is enabled.\n\n \u003cdetails\u003e\n  \u003csummary\u003e Code Example \u003c/summary\u003e\n\n ```javascript\nprompt({\n\ttitle: \"Counter\",\n\tlabel: \"Choose a number:\",\n\tvalue: \"59\",\n\ttype: \"counter\",\n\tcounterOptions: { minimum: -69, maximum: undefined, multiFire: true },\n\tresizable: true,\n\theight: 150,\n\twidth: 300,\n\tcustomStylesheet: \"dark\",\n}, win).then(input =\u003e console.log(`input == ${input}`)).catch(console.error)\n ```\n \u003c/details\u003e\n\n \u003cdetails\u003e\n  \u003csummary\u003e Screenshots \u003c/summary\u003e\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Counter/Counter.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Counter/CounterDark.png)\n\u003c/details\u003e\n\n----\n\n### select\n\nCreate a prompt with a dropdown select menu.\n\nMust specify selectOptions with valid entries in **one** of the following format:\n\n```javascript\n selectOptions: [\"thisReturn0\", \"thisReturn1\", \"thisReturn2\"]\n selectOptions: {\n    0: \"thisReturn0\",\n    1: \"thisReturn1\",\n    2: \"imSelected\",\n    potato: \"thisReturnPotato\"\n }\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e Code Example \u003c/summary\u003e\n\n ```javascript\nprompt({\n\ttitle: \"Select\",\n\tlabel: \"Choose an option:\",\n\ttype: \"select\",\n\tvalue: \"2\",\n\tselectOptions: [\"thisReturn0\", \"thisReturn1\", \"imSelected\", \"thisReturn3\"],\n\t// \tselectOptions: {0: \"thisReturn0\", 1: \"thisReturn1\", 2: \"imSelected\" , potato: \"thisReturnPotato\"},\n\tresizable: true,\n\theight: 150,\n\twidth: 300,\n\tcustomStylesheet: \"dark\",\n}, win).then(input =\u003e console.log(`input == ${input}`)).catch(console.error)\n ```\n \u003c/details\u003e\n\n \u003cdetails\u003e\n  \u003csummary\u003e Screenshots \u003c/summary\u003e\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Select/SelectClosed.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Select/SelectOpen.png)\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Select/SelectDarkClosed.png)\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/Select/SelectDarkOpen.png)\n\u003c/details\u003e\n\n----\n\n### multiInput\n\nCreate a prompt with multiple inputs. Select inputs can also be used.\n\nReturns an array with with input in same order that was given to the options, for example:\nmultiInputOptions: [{usernameOptions}, {passwordOptions}] could return [\"Jack\", \"61523\"]\n\nMust specify multiInputOptions with valid entries in the following format:\n\n```javascript\n multiInputOptions: [{myinputoptions1}, {myinputoptions2}]\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e Code Example \u003c/summary\u003e\n\n ```javascript\nprompt({\n    title: \"credentials\",\n    label: \"Login Info:\",\n    type: \"multiInput\",\n    multiInputOptions:\n        [\n            {\n                inputAttrs:\n                {\n                    type: \"email\",\n                    required: true,\n                    placeholder: \"email\"\n                }\n            },\n            {\n                inputAttrs:\n                {\n                    type: \"password\",\n                    placeholder: \"password\"\n                }\n            },\n            {\n                selectOptions: { na: \"North America\", eu: \"Europe\", other: \"Other\" },\n                value: \"2\"\n            }\n        ],\n    resizable: true,\n    width: 300,\n    height: 225,\n}, win).then(input =\u003e console.log(`input == ${input}`)).catch(console.error)\n ```\n \u003c/details\u003e\n\n \u003cdetails\u003e\n  \u003csummary\u003e Screenshots \u003c/summary\u003e\n\nWith `selectOptions`:\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/multiInput/multiInputSelect.png)\n\nWithout `selectOptions`:\n*This screenshot also contains a custom button.*\n\n![](https://github.com/Araxeus/custom-electron-prompt/blob/main/screenshots/multiInput/button.png)\n\n\u003c/details\u003e\n\n----\n\n## Options object (optional)\n\n### ⚠️ New options :\n\n| Key                | Explanation                                                                                                                                                                                                                                                    |\n| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| frame              | (optional, boolean) Wether to create prompt with frame. Defaults to true.                                                                                                                                                                                      |\n| customScript       | (optional, string) The local path of a JS file to run on preload. Defaults to null.                                                                                                                                                                            |\n| enableRemoteModule | (optional, boolean) Wether the prompt window have remote modules activated, Defaults to false.                                                                                                                                                                 |\n| customStylesheet   | (optional, string) The local path of a CSS file to customize the style of the prompt window, **you can use just \"dark\" to use the premade dark skin**. Defaults to null.                                                                                       |\n| type               | (optional, string) The type of input field, either `input` for a standard text input field or `select` for a dropdown type input or `counter` for a number counter with buttons. or `keybind` for an electron accelerator grabber. or **`multiInput` to use more than 1 input in a prompt** Defaults to 'input'.  |\n| counterOptions     | (optional, object) minimum and maximum of counter, and if continuous input is enabled. format: `{minimum: %int%, maximum: %int%, multiFire: %boolean%`. min+max values defaults to null and multiFire defaults to false.                                       |\n| keybindOptions     | (optional, object)  Required if type=keybind. represent an array of objects in format: `{type: %string%, value: %string%, default: %string%}`. `default` has to be a valid accelerator to work                                                                 |\n| multiInputOptions     | (optional, object) an Array of objects having options for every input, format: `[{inputAttrs:{type:'email'}},{inputAttrs:{type:'password'}}]`, `[object, object]` to use it without passing any options simply `[{},{},{}]`, just create x amount of empty objects to add x inputs.                                       |\n| button       | (optional, object) adds a button after the success(OK) with a custom label, onClick and optional attributes. Object format: `{label: 'myLabel', click: () =\u003e alert(\"click\"), attrs: {style: 'background: black'}}`, `{label: %string%, click: %function%, attrs?: %object%}`|\n| x, y               | (optional, integer) The x and y coordinates of the prompt window. Defaults to undefined. (those are two different optional parameters)                                                                                                                                                                     |\n\n### Original options:\n\n| Key            | Explanation                                                                                                                                                                                                                    |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| title          | (optional, string) The title of the prompt window. Defaults to 'Prompt'.                                                                                                                                                       |\n| label          | (optional, string) The label which appears on the prompt for the input field. Defaults to 'Please input a value:'.                                                                                                             |\n| buttonLabels   | (optional, object) The text for the OK/cancel buttons. Properties are 'ok' and 'cancel'. Defaults to null.                                                                                                                     |\n| value          | (optional, string) The default value for the input field. Defaults to null.                                                                                                                                                    |\n| inputAttrs     | (optional, object) The attributes of the input field, analagous to the HTML attributes: `{type: 'text', required: true}` -\u003e `\u003cinput type=\"text\" required\u003e`. Used if the type is 'input'.                                       |\n| selectOptions  | (optional, object) The items for the select dropdown if using the 'select' type in the format 'value': 'display text', where the value is what will be given to the then block and the display text is what the user will see. |\n| useHtmlLabel   | (optional, boolean) Whether the label should be interpreted as HTML or not. Defaults to false.                                                                                                                                 |\n| width          | (optional, integer) The width of the prompt window. Defaults to 370.                                                                                                                                                           |\n| minWidth       | (optional, integer) The minimum allowed width for the prompt window. Default to width if specified or default_width(370).                                                                                                      |\n| height         | (optional, integer) The height of the prompt window. Defaults to 130.                                                                                                                                                          |\n| minHeight      | (optional, integer) The minimum allowed height for the prompt window. Default to height if specified or default_height(160).                                                                                                   |\n| resizable      | (optional, boolean) Whether the prompt window can be resized or not (also sets useContentSize). Defaults to false.                                                                                                             |\n| alwaysOnTop    | (optional, boolean) Whether the window should always stay on top of other windows. Defaults to false                                                                                                                           |\n| icon           | (optional, string) The path to an icon image to use in the title bar. Defaults to null and uses electron's icon.                                                                                                               |\n| menuBarVisible | (optional, boolean) Whether to show the menubar or not. Defaults to false.                                                                                                                                                     |\n| skipTaskbar    | (optional, boolean) Whether to show the prompt window icon in taskbar. Defaults to true.                                                                                                                                       |\n\nIf not supplied, it uses the defaults listed in the table above.\n\n### parentBrowserWindow (optional)\n\nThe window in which to display the prompt on. If not supplied, the parent window of the prompt will be null.\n\n### customScript (optional)\n\nCreate the script with the following template:\n\n```javascript\nmodule.exports = () =\u003e {\n    // This function will be called as a preload script\n    // So you can use front features like `document.querySelector`\n};\n```\n----\n\n### Custom/Extra Button (optional)\n\nAdds an extra/custom button with special functionalities other than success or error. Passing a `label` will update the button's innerHTML, `click` should be a funtion which will execute **onclick**, lastly `attrs` should contain all the attributes that should be added to the button such as custom styles.\n\n \u003cdetails\u003e\n  \u003csummary\u003e Code Example \u003c/summary\u003e\n\n\n```javascript\nawait prompt({\n            title: 'Login credentials',\n            label: 'Credentials',\n            value: 'http://example.org',\n            inputAttrs: {\n                type: 'url'\n            },\n            type: 'multiInput',\n            multiInputOptions:\n                [{\n                    label: \"username\",\n                    inputAttrs:\n                    {\n                        type: \"email\",\n                        required: true,\n                        placeholder: \"email\"\n                    }\n                },\n                {\n                    label: \"password\",\n                    inputAttrs:\n                    {\n                        type: \"password\",\n                        placeholder: \"password\"\n                    }\n                }],\n            // customStylesheet: \"dark\",\n            button:\n            {\n                label: \"Autofill\",\n                click: () =\u003e\n                {\n                    document.querySelectorAll(\"#data\")[0].value = \"mama@young.com\";\n                    document.querySelectorAll(\"#data\")[1].value = \"mysecretrecipe\";\n                },\n                attrs:\n                {\n                    abc: 'xyz'\n                }\n            }\n        }));\n```\n\n\u003c/details\u003e\n\n \u003cdetails\u003e\n  \u003csummary\u003e Screenshots \u003c/summary\u003e\n\n\n![](https://github.com/amunim/custom-electron-prompt/blob/main/screenshots/multiInput/button.PNG)\n\u003c/details\u003e\n\n----\n\n\u003e Disclaimer: this package is a highly modified version of  [electron-prompt](https://github.com/p-sam/electron-prompt)\n\u003e\n\u003e The author of that package didn't want much contributions or changes, but you are more than welcome to contribute and create new stable prompt features over here :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faraxeus%2Fcustom-electron-prompt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faraxeus%2Fcustom-electron-prompt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faraxeus%2Fcustom-electron-prompt/lists"}