{"id":13577171,"url":"https://github.com/nwfw/nw-app-example","last_synced_at":"2026-04-16T19:08:14.807Z","repository":{"id":85020661,"uuid":"100372137","full_name":"nwfw/nw-app-example","owner":"nwfw","description":"Example app based on nw-skeleton framework","archived":false,"fork":false,"pushed_at":"2017-11-25T00:18:17.000Z","size":1493,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T12:40:04.512Z","etag":null,"topics":["chromium","desktop-app","javascript","nodejs","nwjs","nwjs-application","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nwfw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-15T11:48:43.000Z","updated_at":"2019-06-19T06:40:52.000Z","dependencies_parsed_at":"2023-04-29T19:24:47.219Z","dependency_job_id":null,"html_url":"https://github.com/nwfw/nw-app-example","commit_stats":{"total_commits":107,"total_committers":1,"mean_commits":107.0,"dds":0.0,"last_synced_commit":"8dd2c216c9e440032c24c75a0cfd67142f9e1d49"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwfw%2Fnw-app-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwfw%2Fnw-app-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwfw%2Fnw-app-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nwfw%2Fnw-app-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nwfw","download_url":"https://codeload.github.com/nwfw/nw-app-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933385,"owners_count":20857055,"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":["chromium","desktop-app","javascript","nodejs","nwjs","nwjs-application","vuejs2"],"created_at":"2024-08-01T15:01:18.774Z","updated_at":"2026-04-16T19:08:14.743Z","avatar_url":"https://github.com/nwfw.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# nw-app-example #\n\nExample app for node-webkit (nwjs) framework [nwfw/nw-skeleton](https://github.com/nwfw/nw-skeleton \"nw-skeleton\")\n\n\u003ctable width=\"100%\" align=\"center\" border=\"0\"\u003e\n\u003ctr\u003e\n\u003ctd width=\"20%\"\u003e\n\n| [Top](#nw-app-example) | [Usage](#usage) |\n|:---:|:---:|\n| [Features](#features) | [Documentation](#documentation) |\n| [Components](#components) | [App state](#app-state) |\n| [App data](#app-data) | [User data](#user-data) |\n| [Mixed context](#mixed-context) | [Clipboard](#clipboard) | [Base classes](#base-classes) | [CSS config files](#css-config-files) |\n| [Easy extending](#easy-extending) | [Internationalization](#internationalization) | [Logging](#logging) |\n| [Themes](#themes) | [Controlled initialization / shutdown](#controlled-initialization--shutdown) | [Menus / tray](#menus--tray) | [Configuration](#configuration) | [Resetting configuration and / or data](#resetting-configuration-and--or-data) |\n\n\u003c/td\u003e\n\u003ctd valign=\"center\"\u003e\n\n![Example app screenshot](https://gist.githubusercontent.com/jazziebgd/8b07f06bc6ef9057a590fbdcd002f905/raw/nw-app-example-window.png \"Example app screenshot\")\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Basic info ##\n\n\u003e __For more info, help and howto refer to [nw-skeleton wiki](https://github.com/nwfw/nw-skeleton/wiki \"nw-skeleton wiki\")__\n\nThis example application shows some of core framework functionalities such as local component overrides and components and/or themes as modules. It relies on themes from [nw-themes](https://github.com/nwfw/nw-themes \"nw-themes\") module. It has two 'main' components:\n\n* [nw-app-test](https://github.com/nwfw/nw-app-test \"nw-app-test\") - A test component that allows you to experiment with built-in framework functionailties\n* [nw-canvas-playground](https://github.com/nwfw/nw-canvas-playground \"nw-canvas-playground\") - An example _async_ component that renders a drawing in `\u003ccanvas\u003e` HTML element and allows you to play around with it.\n\nEach component has its own storage and config namespace. Also, __app-main__ component from nw-skeleton is overriden here so it shows interface to pick between __nw-app-test__ and __nw-canvas-playground__ components.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Usage ##\n\n* Install [git](https://git-scm.com/downloads \"git\"), [node.js](https://nodejs.org/en/download/ \"node.js\") and [nwjs.io](https://nwjs.io/downloads/ \"nwjs.io\") if you don't have those already installed\n* Clone [this repository](https://github.com/nwfw/nw-app-example \"nw-app-example\") - `git clone https://github.com/nwfw/nw-app-example.git`\n* Execute `npm install`\n* Run with `nw .` (Mac/Linux) or `nw.exe .` (Windows)\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Features ##\n\n* Main framework features:\n  * I18N (internationalization) with integrated translating and language editing system\n  * Mac/windows/linux support\n  * Transparent / frameless window support\n  * Integrated, overridable window controls and menus\n  * [Configurable](#configuration) keyboard shortcuts\n  * Desktop notifications\n  * Application notifications\n  * Cancellable application operations functionality with optional progress bar indicator\n  * [Configurable](#configuration) application tray icon and menus\n  * [Configurable](#configuration) application (window) menus\n  * [Configurable](#configuration) command-line parameters\n  * User data saving in localStorage\n  * Persistent window position/width/height between sessions\n  * Custom icons/app info with [nwjs-builder-phoenix](https://github.com/evshiron/nwjs-builder-phoenix \"nwjs-builder-phoenix\") or nwjs building tool of your choice\n* Frontend (UI) features:\n  * Built-in modal dialog functionality with callbacks\n  * Frontend application and Vue components structure completely [configurable](#configuration) through [config file](#configuration) with components-as-modules option and async component support.\n  * All framework Vue components can be overriden simply by creating dirs/files with same names in applications that use the framework.\n  * Support for [configurable](#configuration) Vue.js mixins, filters, directives etc.\n  * Theme support with live theme switching and optional themes as node modules\n  * [Configurable](#configuration) external css/js resource loading\n  * Optional separate debug window for maximum readability\n* Other framework features:\n  * __ES2016__ ready (async/await, arrow functions, classes etc.)\n  * Most styles can be changed through CSS variables\n  * Optional CSS compiling (postcss)\n  * Optional live CSS reloading when debug is on\n  * Logging:\n    * Debug messages (with stack traces, [configurable](#configuration) message levels and grouping in console)\n    * Per-class [configurable](#configuration) debug output\n    * User messages  (with stack traces and [configurable](#configuration) message levels)\n    * Per-class [configurable](#configuration) user message output\n    * Exporting debug/user messages to JSON files for later analysis\n    * Log viewer for saved user/debug logs\n* Planned framework features for the future:\n  * [ ] Remote (binary and non-binary) js loading\n  * [ ] Automatic updates\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Documentation ##\n\nYou can see online generated documentation for nw-skeleton framework [here](https://nwfw.github.io/nw-skeleton-documentation/ \"nw-skeleton documentation\") and online generated documentation for nw-app-example [here](https://nwfw.github.io/nw-app-example-documentation/ \"nw-app-example documentation\")\n\nTo generate documentation locally, run `npm run doc` in application directory which will generate documentation in './doc'\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Components ##\n\nVue.js components are organized in directories:\n\n* __global__ - for global components\n* __app__ - for \"regular\" components\n* __modal__ - for modal-dialog components (those will also be registered as global)\n\n\u003cdiv align=\"center\"\u003e\n\n| ![System window-controls component](https://gist.githubusercontent.com/jazziebgd/8b07f06bc6ef9057a590fbdcd002f905/raw/window-controls-and-menu.png \"System window-controls component\") |\n|:---:|\n| System window-controls component |\n\n\u003c/div\u003e\n\nComponents can also be loaded as external npm modules. Each component can have its state file that gets merged with app state data. System will also automatically load css files with same name as the component. If necessary, component configuration can include any number of custom css files.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## App state ##\n\nAll data for the app is stored under single appState object so components and other code can easily share data. Separate file for application data is provided since that data structure varies from app to app.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## App data ##\n\nStored in separate file, this object is to be used as temporary current app instance storage.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## User data ##\n\nThis object can easily be saved or loaded via localStorage helper in order to preserve data for next sessions\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Mixed context ##\n\nUsing nwjs.io mixed node/browser context, you can easily work with filesystem, network, websockets or DOM from single Vue component or javascript class.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Clipboard ##\n\nClipboard helper makes it easy to cut/copy/paste text without having to rely on OS support - works same on all platforms (Win, Mac, Linux)\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Base classes ##\n\nBase classes (all system objects extend them) contain all necessary methods and properties for easy coding such as translations, easy helper access, logging and notifying user whether through application or desktop notifications (enabled in nwjs.io by default). There are three of them:\n\n* [BaseClass](https://nwfw.github.io/nw-skeleton-documentation/appWrapper.BaseClass.html \"BaseClass\") - main base class that contains common methods for extended classes. This one should not be extended directly, instead one of the classes below are used when creating new classes.\n* [AppBaseClass](https://nwfw.github.io/nw-skeleton-documentation/appWrapper.AppBaseClass.html \"AppBaseClass\") - base class for application classes (i.e. ones that run in node/browser context)\n* [MainBaseClass](https://nwfw.github.io/nw-skeleton-documentation/mainScript.MainBaseClass.html \"MainBaseClass\") - base class for main script classes (i.e. ones that run in main nwjs.io script context)\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## CSS config files ##\n\nAll themes as well as system itself contain config CSS files that declare CSS variables that can be used in all CSS files - changing appearance and UX is wasy as setting the CSS variable to desired value\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Easy extending ##\n\nUsing configuration variable `appConfig.mainComponent`, you can easily configure what will be base view for your app. Since components themselves can extend configuration through their componentState file (or using separate config file for npm-module components) you can even override main component from component configuration itself.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Internationalization ##\n\nUsing simple JS objects for language definitions and internationalization, it is easy to adapt the app for all user needs. With auto-scan and auto-clear (auto-trim) functionality, adding new or removing unneeded translations and/or languages is easy and requires no coding or programming skills.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Logging ##\n\nWith [configurable](#configuration) message levels (defaults are debug, info, warning and error) debugging and filtering debug logs is easy. Logs can be saved in JSON format for later analysis, and each log message can contain stack trace for easier bug fixing.\n\n\u003cdiv align=\"center\"\u003e\n\n| ![Separate debug window](https://gist.githubusercontent.com/jazziebgd/8b07f06bc6ef9057a590fbdcd002f905/raw/separate-app-debug-window.png \"Separate debug window\") |\n|:---:|\n| Separate debug window |\n\n\u003c/div\u003e\n\nBoth user messages and debug logs can be configured to be automatically saved as files for later analysis as well.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Themes ##\n\nEach theme can contain config css file that overrides system css config. In addition, you can define your own css files that will be loaded beside system ones, override system css files set css file loading order etc. You can even set your own js files that will be included into application `\u003chead\u003e` tag if theme requires them.\nBy setting a single flag `liveCss` in configuration file, you can enable live CSS reloading to make styling easier. Live CSS reload works with or without CSS compiling, but only when debug is enabled.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Controlled initalization / shutdown ##\n\nApplication will wait for certain flags in `appState` to be set before it presents its window to the user.\nEach of the main JS classes can have async `initialize` and `finalize` methods that will be called upon application initialization or finalization. In addition, they can also have async `shutdown` method that will be automatically called before application closes.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Menus / Tray ##\n\nYou can easily configure application menus using just [config file](#configuration) variables `hasAppMenu` and `menuData`.\n\n\u003cdiv align=\"center\"\u003e\n\n| ![Tray icon and menu example](https://gist.githubusercontent.com/jazziebgd/8b07f06bc6ef9057a590fbdcd002f905/raw/app-tray-menu.png \"Tray icon and menu example\") |\n|:---:|\n| Tray icon and menu example |\n\n\u003c/div\u003e\n\nTray support w/icons is also available and fully [configurable](#configuration) through configuration file variables `hasTrayIcon` and `trayData`.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Modal dialogs ##\n\n\u003cdiv align=\"center\"\u003e\n\n| ![Modal language editor](https://gist.githubusercontent.com/jazziebgd/8b07f06bc6ef9057a590fbdcd002f905/raw/modal-dialog-example.png \"Modal language editor\") |\n|:---:|\n| Modal language editor |\n\n\u003c/div\u003e\n\nEasily extendable and highly [configurable](#configuration), modal dialog components can be used for all types of tasks - from loading/saving files to displaying warnings / queries on app closing. Modal dialogs can display app notifications and progress bar if needed, since modal mask can obscure those important UI elements. You can set callbacks for 'onBeforeOpen', 'onOpen', 'onBeforeClose', 'onClose', 'onCancel' and 'onConfirm' events.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Configuration ##\n\nAlmost all application aspects can be controlled through configuration. Configuration variables are explained in [JSDoc documentation](https://nwfw.github.io/nw-skeleton-documentation/global.html#AppWrapperConfig).\nDefault configuration file looks like:\n\n```javascript\n{\n    main: {\n        debug: {\n            enabled: true,\n            debugToWindow: false,\n            debugLevel: 2,\n            displayTimestamps: true,\n            debugToFile: true,\n            saveStacksToFile: true,\n            debugToFileAppend: false,\n            debugLogFilename: './app/var/log/main-debug.log',\n        },\n    },\n    wrapper: {\n        appFile: './node_modules/nw-skeleton/app-wrapper/js/app',\n\n        themeBaseDir: './node_modules/nw-skeleton/app-wrapper/css/themes',\n\n        componentCodeRegex: /\\.js$/,\n        componentDirectories: {\n            component: ['./node_modules/nw-skeleton/app-wrapper/components/app/'],\n            globalComponent: ['./node_modules/nw-skeleton/app-wrapper/components/global/', './node_modules/nw-skeleton/app-wrapper/components/form'],\n            modalComponent: ['./node_modules/nw-skeleton/app-wrapper/components/modal/']\n        },\n\n        systemHelperDirectories: ['./node_modules/nw-skeleton/app-wrapper/js/helper/system/'],\n        helperDirectories: ['./node_modules/nw-skeleton/app-wrapper/js/helper/'],\n\n        mixinRoot: './node_modules/nw-skeleton/app-wrapper/js/mixin/',\n        mixinExtensionRegex: /\\.js$/,\n\n        directiveRoot: './node_modules/nw-skeleton/app-wrapper/js/directive/',\n        directiveExtensionRegex: /\\.js$/,\n\n        filterRoot: './node_modules/nw-skeleton/app-wrapper/js/filter/',\n        filterExtensionRegex: /\\.js$/,\n\n        translationExtensionRegex: /\\.i18n\\.js$/,\n        translationsRoot: './app/data/translations/',\n\n        componentMapping: {\n            'app-window': {\n                name: 'app-window',\n                components: {\n                    'app-header': {\n                        name: 'app-header',\n                        components: {\n                            'window-controls': {\n                                name: 'window-controls',\n                                components: {\n                                    'theme-select': {\n                                        name: 'theme-select'\n                                    },\n                                    'language-select': {\n                                        name: 'language-select'\n                                    }\n                                }\n                            },\n                        }\n                    },\n                    'app-main': {\n                        name: 'app-main'\n                    },\n                    'app-footer': {\n                        name: 'app-footer',\n                    }\n                }\n            }\n        },\n    },\n\n    minPauseDuration: 10,\n    shortPauseDuration: 100,\n    mediumPauseDuration: 250,\n    longPauseDuration: 700,\n    longerPauseDuration: 1000,\n\n    cancelOperationTimeout: 30000,\n\n    appConfig: {\n        appFile: null,\n        appSubFiles: [],\n        mainComponent: 'app-main',\n        tmpDataDir: './app/var',\n        showInitializationStatus: true,\n        showInitializationProgress: true,\n\n        themeBaseDir: './app/css/themes',\n\n        cssCompiledFile: '/app/var/css/dist.css',\n        initCssFiles: [\n            '/node_modules/nw-skeleton/app-wrapper/css/config.css',\n        ],\n        cssFiles: [\n            '/node_modules/nw-skeleton/app-wrapper/css/fonts.css',\n            '/node_modules/nw-skeleton/app-wrapper/css/layout.css',\n            '/node_modules/nw-skeleton/app-wrapper/css/style.css',\n            '/node_modules/nw-skeleton/app-wrapper/css/transitions.css'\n        ],\n        overrideCssFiles: [],\n\n        initJsFiles: [],\n        jsFiles: [\n            '/node_modules/nw-skeleton/app-wrapper/js/lib/ext/vue.js'\n        ],\n\n        debugCssFiles: [\n            '/node_modules/nw-skeleton/app-wrapper/css/debug.css'\n        ],\n\n        debugJsFiles: [],\n\n        componentMapping: {},\n        componentModules: {\n            component: [],\n            globalComponent: [],\n            modalComponent: []\n        },\n\n        mixinRoot: './app/js/mixin/',\n\n        directiveRoot: './app/js/directive/',\n        directiveExtensionRegex: /\\.js$/,\n\n        disableRightClick: true,\n\n        hasAppMenu: false,\n        menuData: {\n            editMenu: {\n                menuItem: {\n                    label: 'Edit',\n                    method: 'noop'\n                },\n                children: [\n                    // {\n                    //     menuItem: {\n                    //         label: 'Undo',\n                    //         method: 'helpers.clipboardHelper.undo',\n                    //         shortcut: {\n                    //             key: 'z',\n                    //             modifiers: {\n                    //                 ctrl: true\n                    //             }\n                    //         }\n                    //     }\n                    // },\n                    // {\n                    //     menuItem: {\n                    //         label: 'Redo',\n                    //         method: 'helpers.clipboardHelper.redo',\n                    //         shortcut: {\n                    //             key: 'z',\n                    //             modifiers: {\n                    //                 ctrl: true,\n                    //                 shift: true\n                    //             }\n                    //         }\n                    //     }\n                    // },\n                    {\n                        menuItem: {\n                            type: 'separator'\n                        },\n                        children: []\n                    },\n                    {\n                        menuItem: {\n                            label: 'Cut',\n                            method: 'helpers.clipboardHelper.cut',\n                            shortcut: {\n                                key: 'x',\n                                modifiers: {\n                                    ctrl: true\n                                }\n                            }\n                        }\n                    },\n                    {\n                        menuItem: {\n                            label: 'Copy',\n                            method: 'helpers.clipboardHelper.copy',\n                            shortcut: {\n                                key: 'c',\n                                modifiers: {\n                                    ctrl: true\n                                }\n                            }\n                        }\n                    },\n                    {\n                        menuItem: {\n                            label: 'Paste',\n                            method: 'helpers.clipboardHelper.paste',\n                            shortcut: {\n                                key: 'v',\n                                modifiers: {\n                                    ctrl: true\n                                }\n                            }\n                        }\n                    },\n                    {\n                        menuItem: {\n                            label: 'Select all',\n                            method: 'helpers.clipboardHelper.selectAll',\n                            shortcut: {\n                                key: 'a',\n                                modifiers: {\n                                    ctrl: true\n                                }\n                            }\n                        }\n                    }\n                ]\n            }\n        },\n        hasTrayIcon: false,\n        trayData: {},\n        allowFullscreen: true,\n        hideFullscreenHeader: true,\n        hideFullscreenFooter: true,\n        windowConfig: {\n            left: null,\n            top: null,\n            width: null,\n            height: null,\n            fullscreen: false,\n        },\n    },\n\n    configData: {\n        uneditableConfig: [],\n        editableConfig: [],\n        noReloadConfig: [],\n        reloadConfig: [],\n        ignoreUserConfig: [\n            'appConfig.menuData',\n            'appConfig.componentMapping',\n            'appConfig.appSubFiles',\n            'userMessages.forceUserMessages',\n            'debug.forceDebug',\n            'appInfo',\n            'currentLanguage',\n            'currentLanguageName',\n            'currentLocale',\n        ],\n        defaultVar: {\n            editable: true,\n            reload: true,\n            control: 'text'\n        },\n        vars: {\n            app: {\n                editable: false,\n                reload: true\n            },\n            appConfig: {\n                editable: true,\n                reload: false\n            },\n            logDir: {\n                editable: false,\n                reload: true\n            },\n            varDir: {\n                editable: false,\n                reload: true\n            },\n            'debug.debugMessagesFilename': {\n                editable: false,\n                reload: true\n            },\n            'userMessages.userMessagesFilename': {\n                editable: false,\n                reload: true\n            },\n            'userMessages.userMessageLevel': {\n                editable: true,\n                reload: false,\n                type: 'string',\n                control: 'select',\n                controlData: {\n                    items: {\n                        1: 'debug',\n                        2: 'info',\n                        3: 'warning',\n                        4: 'error'\n                    }\n                }\n            },\n            'debug.debugLevel': {\n                editable: true,\n                reload: false,\n                type: 'string',\n                control: 'select',\n                controlData: {\n                    items: {\n                        1: 'debug',\n                        2: 'info',\n                        3: 'warning',\n                        4: 'error'\n                    }\n                }\n            },\n            'debug.enabled': {\n                editable: true,\n                reload: false\n            },\n            'debug.hideDebug': {\n                editable: true,\n                reload: false\n            },\n            'logger.messageLevels': {\n                editable: false,\n                reload: true\n            },\n            windowWidth: {\n                editable: false,\n                reload: false\n            },\n            windowHeight: {\n                editable: false,\n                reload: false\n            },\n            componentMapping: {\n                editable: false,\n                reload: true\n            },\n            theme: {\n                editable: true,\n                reload: false\n            },\n            currentLanguage: {\n                editable: true,\n                reload: false,\n                type: 'string',\n                control: 'select',\n                controlData: {\n                    items: {\n                        'en-US': 'English',\n                        'sr-Latn-RS': 'Srpski',\n                        'sr-Cyrl-RS': 'Српски',\n                    }\n                }\n            },\n            currentLocale: {\n                editable: true,\n                reload: false,\n                type: 'string',\n                control: 'select',\n                controlData: {\n                    items: {\n                        'en-US': 'English',\n                        'sr-Latn': 'Srpski',\n                        'sr-Cyrl': 'Српски',\n                    }\n                }\n            },\n            'debug.messagesExpanded': {\n                editable: true,\n                reload: false\n            },\n            'userMessages.messagesExpanded': {\n                editable: true,\n                reload: false\n            },\n            'debug.displayTimestamps': {\n                editable: true,\n                reload: false\n            },\n            'userMessages.displayTimestamps': {\n                editable: true,\n                reload: false\n            },\n            'debug.forceDebug': {\n                editable: false,\n                reload: true\n            },\n            'userMessages.forceUserMessages': {\n                editable: false,\n                reload: false\n            },\n            compileCss: {\n                editable: true,\n                reload: false\n            },\n            liveCss: {\n                editable: true,\n                reload: false\n            },\n        }\n    },\n\n    varDir: './app/var',\n    logDir: './app/var/log',\n\n    currentLanguageName: 'English',\n    currentLanguage: 'en-US',\n    currentLocale: 'en',\n    allowLanguageChange: true,\n    autoAddLabels: true,\n\n    themeModules: [],\n    theme: 'dark',\n    allowThemeChange: true,\n\n    liveCss: false,\n    compileCss: false,\n\n    appNotifications: {\n        userMessageDuration: 3000,\n        duration: 5000,\n    },\n    logger: {\n        messageLevels: {\n            'debug': 1,\n            'info': 2,\n            'warning': 3,\n            'error': 4\n        },\n    },\n    userMessages: {\n        animateMessages: true,\n        hideUserMessages: false,\n        userMessageLevel: 3,\n        maxVisibleUserMessages: 200,\n        maxUserMessages: 5000,\n        userMessagesToFile: true,\n        saveStacksToFile: true,\n        userMessagesToFileAppend: false,\n        userMessagesFilename: './app/var/log/user-messages.log',\n        messagesExpanded: false,\n        displayTimestamps: true,\n        forceUserMessages: {\n            AppConfig: false,\n            AppNotificationsHelper: false,\n            AppOperationHelper: false,\n            AppTemplates: false,\n            AppTranslations: false,\n            AppWrapper: false,\n            ClipboardHelper: false,\n            ComponentHelper: false,\n            DebugHelper: false,\n            FileManager: false,\n            FormatHelper: false,\n            HtmlHelper: false,\n            KeyboardHelper: false,\n            MenuHelper: false,\n            ModalHelper: false,\n            StaticFilesHelper: false,\n            StorageHelper: false,\n            StyleHelper: false,\n            ThemeHelper: false,\n            UserDataHelper: false,\n            UserMessageHelper: false,\n            UtilHelper: false,\n            WindowManager: false,\n            WrapperApp: false\n        }\n    },\n    debug: {\n        animateMessages: true,\n        hideDebug: false,\n        enabled: true,\n        usage: false,\n        usageInterval: 500,\n        usageGraphs: false,\n        usageHistoryCount: 1000,\n        debugToFile: true,\n        saveStacksToFile: true,\n        debugToFileAppend: false,\n        debugMessagesFilename: './app/var/log/debug-messages.log',\n        messagesExpanded: false,\n        displayTimestamps: true,\n        devTools: true,\n        alwaysTrace: false,\n        debugLevel: 3,\n        maxVisibleDebugMessages: 200,\n        maxDebugMessages: 5000,\n        debugGroupsCollapsed: false,\n        passToMain: false,\n        debugWindowFile: './node_modules/nw-skeleton/app-wrapper/template/debug.html',\n        forceDebug: {\n            AppConfig: false,\n            AppNotificationsHelper: false,\n            AppOperationHelper: false,\n            AppTemplates: false,\n            AppTranslations: false,\n            AppWrapper: false,\n            ClipboardHelper: false,\n            ComponentHelper: false,\n            DebugHelper: false,\n            FileManager: false,\n            FormatHelper: false,\n            HtmlHelper: false,\n            KeyboardHelper: false,\n            MenuHelper: false,\n            ModalHelper: false,\n            StaticFilesHelper: false,\n            StorageHelper: false,\n            StyleHelper: false,\n            ThemeHelper: false,\n            UserDataHelper: false,\n            UserMessageHelper: false,\n            UtilHelper: false,\n            WindowManager: false,\n            WrapperApp: false\n        },\n    },\n\n    windowCloseTimeoutDuration: 15000,\n    windowReloadTimeoutDuration: 15000,\n\n    windowWidth: null,\n    windowHeight: null,\n\n};\n```\n\nConfiguration values can be easily changed by overriding them your app `config.js` file.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#nw-app-example\"\u003e▲ top\u003c/a\u003e\u003c/div\u003e\n\n## Resetting configuration and / or data ##\n\nThere are three built-in command line parameters for cleaning up saved data:\n\n* `resetConfig` - resets (deletes) saved Configuration\n  * Command line\n    * `nw . resetConfig` (Mac/Linux)\n    * `nw.exe . resetConfig` (Windows)\n* `resetData` - resets (deletes) saved user data\n  * Command line\n    * `nw . resetData` (Mac/Linux)\n    * `nw.exe . resetData` (Windows)\n* `resetAll` - resets (deletes) both user data _and_ saved configuration\n  * Command line\n    * `nw . resetAll` (Mac/Linux)\n    * `nw.exe . resetAll` (Windows)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwfw%2Fnw-app-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnwfw%2Fnw-app-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnwfw%2Fnw-app-example/lists"}