Learn NWJS with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

NWjs Simple Todo App

// package.json
{
    "name": "todo-app",
    "main": "index.html",
    "window": { "title": "Todo App", "width": 800, "height": 600 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Todo App</h1>
        <input id='todoInput' placeholder='New Todo'/>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script>
        const addBtn = document.getElementById('addBtn');
        const input = document.getElementById('todoInput');
        const list = document.getElementById('todoList');
        addBtn.addEventListener('click', () => {
        if(input.value.trim()){
        const li = document.createElement('li');
        li.textContent = input.value;
        list.appendChild(li);
        input.value = '';
        }
        });
        </script>
    </body>
</html>

Demonstrates a simple NW.js app with a Todo list, adding tasks and displaying them using HTML, CSS, and JavaScript with Node.js integration.

Let’s Try →

NWjs File Reader App

// package.json
{
    "name": "file-reader",
    "main": "index.html",
    "window": { "title": "File Reader", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Read Local File</h1>
        <input type='file' id='fileInput'/>
        <pre id='content'></pre>
        <script>
        const fs = require('fs');
        document.getElementById('fileInput').addEventListener('change', e => {
        const file = e.target.files[0];
        if(file){
        fs.readFile(file.path, 'utf8', (err, data) => {
        document.getElementById('content').textContent = err ? err : data;
        });
        }
        });
        </script>
    </body>
</html>

Shows how to read a local text file using NW.js and Node's fs module.

Let’s Try →

NWjs System Tray Example

// package.json
{
    "name": "tray-example",
    "main": "index.html",
    "window": { "title": "Tray Example", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Tray Example</h1>
        <script>
        const nw = require('nw.gui');
        const tray = new nw.Tray({ title: 'Tray', icon: 'icon.png' });
        const menu = new nw.Menu();
        menu.append(new nw.MenuItem({ label: 'Show', click: () => nw.Window.get().show() }));
        menu.append(new nw.MenuItem({ label: 'Exit', click: () => nw.App.quit() }));
        tray.menu = menu;
        </script>
    </body>
</html>

Demonstrates adding a system tray icon with a menu in NW.js.

Let’s Try →

NWjs Notification Example

// package.json
{
    "name": "notification-app",
    "main": "index.html",
    "window": { "title": "Notification App", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Send Notification</h1>
        <button id='notifyBtn'>Notify</button>
        <script>
        document.getElementById('notifyBtn').onclick = () => {
        new Notification('Hello from NW.js!', { body: 'This is a desktop notification.' });
        };
        </script>
    </body>
</html>

Shows how to display a native desktop notification using NW.js.

Let’s Try →

NWjs Local Storage App

// package.json
{
    "name": "storage-app",
    "main": "index.html",
    "window": { "title": "Local Storage App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Persistent Todos</h1>
        <input id='todoInput' placeholder='New Todo'/>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script>
        const list = document.getElementById('todoList');
        let todos = JSON.parse(localStorage.getItem('todos') || '[]');
        function render(){ list.innerHTML = ''; todos.forEach(t => { const li = document.createElement('li'); li.textContent = t; list.appendChild(li); }); }
        render();
        document.getElementById('addBtn').onclick = () => {
        const val = document.getElementById('todoInput').value.trim();
        if(val){ todos.push(val); localStorage.setItem('todos', JSON.stringify(todos)); render(); }
        };
        </script>
    </body>
</html>

Demonstrates saving and loading tasks using localStorage in NW.js.

Let’s Try →

NWjs File Writer App

// package.json
{
    "name": "file-writer",
    "main": "index.html",
    "window": { "title": "File Writer", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Write File</h1>
        <textarea id='text' rows='6' cols='40'></textarea><br>
        <button id='saveBtn'>Save</button>
        <script>
        const fs = require('fs');
        const path = require('path');
        document.getElementById('saveBtn').onclick = () => {
        const text = document.getElementById('text').value;
        fs.writeFile(path.join(process.cwd(), 'output.txt'), text, err => alert(err || 'File saved!'));
        };
        </script>
    </body>
</html>

Demonstrates writing text to a local file using Node's fs module in NW.js.

Let’s Try →

NWjs Menu Example

// package.json
{
    "name": "menu-app",
    "main": "index.html",
    "window": { "title": "Menu App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>NW.js Menu Example</h1>
        <script>
        const nw = require('nw.gui');
        const menu = new nw.Menu({ type: 'menubar' });
        const submenu = new nw.Menu();
        submenu.append(new nw.MenuItem({ label: 'About', click: () => alert('NW.js App') }));
        menu.append(new nw.MenuItem({ label: 'Help', submenu }));
        nw.Window.get().menu = menu;
        </script>
    </body>
</html>

Shows how to create an application menu in NW.js.

Let’s Try →

NWjs Clipboard Example

// package.json
{
    "name": "clipboard-app",
    "main": "index.html",
    "window": { "title": "Clipboard App", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Clipboard Example</h1>
        <input id='textInput' placeholder='Type text here'/>
        <button id='copyBtn'>Copy</button>
        <script>
        const clipboard = require('nw.gui').Clipboard.get();
        document.getElementById('copyBtn').onclick = () => {
        clipboard.set(document.getElementById('textInput').value, 'text');
        alert('Copied to clipboard!');
        };
        </script>
    </body>
</html>

Demonstrates copying text to the system clipboard using NW.js.

Let’s Try →

NWjs Dialog Example

// package.json
{
    "name": "dialog-app",
    "main": "index.html",
    "window": { "title": "Dialog Example", "width": 500, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Select a File</h1>
        <input type='file' id='fileInput'/>
        <pre id='output'></pre>
        <script>
        const fs = require('fs');
        document.getElementById('fileInput').addEventListener('change', e => {
        const file = e.target.files[0];
        if(file) fs.readFile(file.path, 'utf8', (err, data) => {
        document.getElementById('output').textContent = data;
        });
        });
        </script>
    </body>
</html>

Shows how to use native open/save dialogs in NW.js via the file input element.

Let’s Try →

NWjs Auto Reload Example

// package.json
{
    "name": "autoreload-app",
    "main": "index.html",
    "window": { "title": "Auto Reload App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Auto Reload Demo</h1>
        <p>Edit this file to trigger reload!</p>
        <script>
        const fs = require('fs');
        const path = require('path');
        fs.watch(path.join(process.cwd(), 'index.html'), () => {
        location.reload();
        });
        </script>
    </body>
</html>

Demonstrates automatically reloading the app window when files change, using fs.watch.

Let’s Try →

Code Sample Descriptions

NWjs Simple Todo App

// package.json
{
    "name": "todo-app",
    "main": "index.html",
    "window": { "title": "Todo App", "width": 800, "height": 600 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Todo App</h1>
        <input id='todoInput' placeholder='New Todo'/>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script>
        const addBtn = document.getElementById('addBtn');
        const input = document.getElementById('todoInput');
        const list = document.getElementById('todoList');
        addBtn.addEventListener('click', () => {
        if(input.value.trim()){
        const li = document.createElement('li');
        li.textContent = input.value;
        list.appendChild(li);
        input.value = '';
        }
        });
        </script>
    </body>
</html>

Demonstrates a simple NW.js app with a Todo list, adding tasks and displaying them using HTML, CSS, and JavaScript with Node.js integration.

Let’s Try →

NWjs File Reader App

// package.json
{
    "name": "file-reader",
    "main": "index.html",
    "window": { "title": "File Reader", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Read Local File</h1>
        <input type='file' id='fileInput'/>
        <pre id='content'></pre>
        <script>
        const fs = require('fs');
        document.getElementById('fileInput').addEventListener('change', e => {
        const file = e.target.files[0];
        if(file){
        fs.readFile(file.path, 'utf8', (err, data) => {
        document.getElementById('content').textContent = err ? err : data;
        });
        }
        });
        </script>
    </body>
</html>

Shows how to read a local text file using NW.js and Node's fs module.

Let’s Try →

NWjs System Tray Example

// package.json
{
    "name": "tray-example",
    "main": "index.html",
    "window": { "title": "Tray Example", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Tray Example</h1>
        <script>
        const nw = require('nw.gui');
        const tray = new nw.Tray({ title: 'Tray', icon: 'icon.png' });
        const menu = new nw.Menu();
        menu.append(new nw.MenuItem({ label: 'Show', click: () => nw.Window.get().show() }));
        menu.append(new nw.MenuItem({ label: 'Exit', click: () => nw.App.quit() }));
        tray.menu = menu;
        </script>
    </body>
</html>

Demonstrates adding a system tray icon with a menu in NW.js.

Let’s Try →

NWjs Notification Example

// package.json
{
    "name": "notification-app",
    "main": "index.html",
    "window": { "title": "Notification App", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Send Notification</h1>
        <button id='notifyBtn'>Notify</button>
        <script>
        document.getElementById('notifyBtn').onclick = () => {
        new Notification('Hello from NW.js!', { body: 'This is a desktop notification.' });
        };
        </script>
    </body>
</html>

Shows how to display a native desktop notification using NW.js.

Let’s Try →

NWjs Local Storage App

// package.json
{
    "name": "storage-app",
    "main": "index.html",
    "window": { "title": "Local Storage App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Persistent Todos</h1>
        <input id='todoInput' placeholder='New Todo'/>
        <button id='addBtn'>Add</button>
        <ul id='todoList'></ul>
        <script>
        const list = document.getElementById('todoList');
        let todos = JSON.parse(localStorage.getItem('todos') || '[]');
        function render(){ list.innerHTML = ''; todos.forEach(t => { const li = document.createElement('li'); li.textContent = t; list.appendChild(li); }); }
        render();
        document.getElementById('addBtn').onclick = () => {
        const val = document.getElementById('todoInput').value.trim();
        if(val){ todos.push(val); localStorage.setItem('todos', JSON.stringify(todos)); render(); }
        };
        </script>
    </body>
</html>

Demonstrates saving and loading tasks using localStorage in NW.js.

Let’s Try →

NWjs File Writer App

// package.json
{
    "name": "file-writer",
    "main": "index.html",
    "window": { "title": "File Writer", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Write File</h1>
        <textarea id='text' rows='6' cols='40'></textarea><br>
        <button id='saveBtn'>Save</button>
        <script>
        const fs = require('fs');
        const path = require('path');
        document.getElementById('saveBtn').onclick = () => {
        const text = document.getElementById('text').value;
        fs.writeFile(path.join(process.cwd(), 'output.txt'), text, err => alert(err || 'File saved!'));
        };
        </script>
    </body>
</html>

Demonstrates writing text to a local file using Node's fs module in NW.js.

Let’s Try →

NWjs Menu Example

// package.json
{
    "name": "menu-app",
    "main": "index.html",
    "window": { "title": "Menu App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>NW.js Menu Example</h1>
        <script>
        const nw = require('nw.gui');
        const menu = new nw.Menu({ type: 'menubar' });
        const submenu = new nw.Menu();
        submenu.append(new nw.MenuItem({ label: 'About', click: () => alert('NW.js App') }));
        menu.append(new nw.MenuItem({ label: 'Help', submenu }));
        nw.Window.get().menu = menu;
        </script>
    </body>
</html>

Shows how to create an application menu in NW.js.

Let’s Try →

NWjs Clipboard Example

// package.json
{
    "name": "clipboard-app",
    "main": "index.html",
    "window": { "title": "Clipboard App", "width": 400, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Clipboard Example</h1>
        <input id='textInput' placeholder='Type text here'/>
        <button id='copyBtn'>Copy</button>
        <script>
        const clipboard = require('nw.gui').Clipboard.get();
        document.getElementById('copyBtn').onclick = () => {
        clipboard.set(document.getElementById('textInput').value, 'text');
        alert('Copied to clipboard!');
        };
        </script>
    </body>
</html>

Demonstrates copying text to the system clipboard using NW.js.

Let’s Try →

NWjs Dialog Example

// package.json
{
    "name": "dialog-app",
    "main": "index.html",
    "window": { "title": "Dialog Example", "width": 500, "height": 300 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Select a File</h1>
        <input type='file' id='fileInput'/>
        <pre id='output'></pre>
        <script>
        const fs = require('fs');
        document.getElementById('fileInput').addEventListener('change', e => {
        const file = e.target.files[0];
        if(file) fs.readFile(file.path, 'utf8', (err, data) => {
        document.getElementById('output').textContent = data;
        });
        });
        </script>
    </body>
</html>

Shows how to use native open/save dialogs in NW.js via the file input element.

Let’s Try →

NWjs Auto Reload Example

// package.json
{
    "name": "autoreload-app",
    "main": "index.html",
    "window": { "title": "Auto Reload App", "width": 600, "height": 400 }
}

// index.html
<!DOCTYPE html>
<html>
    <body>
        <h1>Auto Reload Demo</h1>
        <p>Edit this file to trigger reload!</p>
        <script>
        const fs = require('fs');
        const path = require('path');
        fs.watch(path.join(process.cwd(), 'index.html'), () => {
        location.reload();
        });
        </script>
    </body>
</html>

Demonstrates automatically reloading the app window when files change, using fs.watch.

Let’s Try →