Learn Nwjs - 10 Code Examples & CST Typing Practice Test

NW.js (previously known as Node-Webkit) is an open-source framework for building desktop applications using web technologies (HTML, CSS, JavaScript) with full access to Node.js APIs.

View all 10 Nwjs code examples →

NWjs Simple Todo App NWjs File Reader App NWjs System Tray Example NWjs Notification Example NWjs Local Storage App NWjs File Writer App NWjs Menu Example NWjs Clipboard Example NWjs Dialog Example NWjs Auto Reload Example

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 →

Frequently Asked Questions about Nwjs

What is Nwjs?

NW.js (previously known as Node-Webkit) is an open-source framework for building desktop applications using web technologies (HTML, CSS, JavaScript) with full access to Node.js APIs.

What are the primary use cases for Nwjs?

Cross-platform desktop applications. Electron alternative for lightweight apps. Apps requiring Node.js APIs (filesystem, networking). Hybrid web-to-desktop apps. Prototyping or internal tooling for businesses

What are the strengths of Nwjs?

Rapid development using web technologies. Seamless Node.js integration. Cross-platform desktop deployment. Access to native OS APIs without additional frameworks. Lightweight compared to Electron for some use cases

What are the limitations of Nwjs?

Larger app size due to Chromium bundling. Performance depends on Chromium for heavy UI. Limited tooling compared to Electron ecosystem. Some OS integrations require manual coding. Smaller community than Electron for support/resources

How can I practice Nwjs typing speed?

CodeSpeedTest offers 10+ real Nwjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Nwjs

What is Nwjs?

NW.js (previously known as Node-Webkit) is an open-source framework for building desktop applications using web technologies (HTML, CSS, JavaScript) with full access to Node.js APIs.

What are the primary use cases for Nwjs?

What are the strengths of Nwjs?

What are the limitations of Nwjs?

How can I practice Nwjs typing speed?

CodeSpeedTest offers 10+ real Nwjs code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.