Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Local Storage App - Nwjs Typing CST Test
Local Storage App — Nwjs Code
Demonstrates saving and loading tasks using localStorage in NW.js.
// 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>Nwjs Language Guide
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.
Primary Use Cases
- ▸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
Notable Features
- ▸Chromium-based rendering engine
- ▸Node.js integration for backend capabilities
- ▸Cross-platform support (Windows, macOS, Linux)
- ▸Native OS features like file system, notifications, and menus
- ▸Ability to package apps as standalone executables
Origin & Creator
Developed by Intel’s Open Source Technology Center in 2011 (originally as Node-Webkit) to enable web developers to build desktop applications easily.
Industrial Note
NW.js is popular for desktop apps that need a web-like interface, rapid prototyping, or access to Node.js modules in a desktop environment.
Quick Explain
- ▸NW.js allows developers to create cross-platform desktop apps with web technologies.
- ▸It combines Chromium and Node.js to enable access to native OS features alongside browser APIs.
- ▸Apps built with NW.js can run on Windows, macOS, and Linux without additional runtime installation.
Core Features
- ▸Full access to Node.js modules in browser context
- ▸Custom window and menu management
- ▸HTML/CSS/JS-based UI
- ▸Support for native OS dialogs and notifications
- ▸Packaging and distribution as desktop executables
Learning Path
- ▸Learn HTML, CSS, JavaScript basics
- ▸Understand Node.js and module system
- ▸Create simple NW.js apps
- ▸Learn packaging and distribution for desktop
- ▸Integrate native OS features using Node.js
Practical Examples
- ▸Simple desktop calculator
- ▸File manager app using Node.js filesystem APIs
- ▸Internal tooling with web interface
- ▸Media player app with custom UI
- ▸Note-taking app with offline storage
Comparisons
- ▸NW.js vs Electron: NW.js is lightweight, Electron has larger ecosystem
- ▸Web technologies vs native desktop code (C++, Swift, .NET)
- ▸Node.js integration vs pure browser apps
- ▸Chromium engine bundled vs using system browser
- ▸Simpler packaging vs more advanced Electron tooling
Strengths
- ▸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
Limitations
- ▸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
When NOT to Use
- ▸Performance-critical desktop apps
- ▸Apps requiring deep OS integration (drivers, low-level APIs)
- ▸Apps needing extensive community support/resources
- ▸Large-scale enterprise apps where Electron may be preferred
- ▸Projects without web/Node.js knowledge
Cheat Sheet
- ▸`nw .` - run app
- ▸`package.json` - app metadata
- ▸`require('fs')` - access filesystem
- ▸`nwbuild` - package app for distribution
- ▸`window` object - main UI container
FAQ
- ▸Is NW.js free?
- ▸Yes - MIT license.
- ▸Does it support multiple platforms?
- ▸Yes - Windows, macOS, Linux.
- ▸Can I use frontend frameworks?
- ▸Yes - React, Vue, Angular, Svelte, etc.
- ▸Is NW.js suitable for production apps?
- ▸Yes - widely used for lightweight desktop apps.
- ▸Do I need Node.js knowledge?
- ▸Yes - NW.js apps require Node.js for desktop functionality.
30-Day Skill Plan
- ▸Week 1: Setup and basic HTML/CSS/JS app
- ▸Week 2: Integrate Node.js modules
- ▸Week 3: Multi-window and menu management
- ▸Week 4: Packaging for multiple OS platforms
- ▸Week 5: Advanced OS integration and optimization
Final Summary
- ▸NW.js is a framework for building desktop apps with web technologies.
- ▸Combines Chromium and Node.js for full-stack access.
- ▸Supports cross-platform deployment on Windows, macOS, and Linux.
- ▸Ideal for web developers transitioning to desktop apps.
- ▸Lightweight alternative to Electron with direct Node.js integration.
Project Structure
- ▸package.json - app configuration
- ▸index.html - main UI file
- ▸js/ - application logic
- ▸css/ - styles
- ▸assets/ - images, fonts, icons
Monetization
- ▸Distribute standalone apps via website
- ▸Internal enterprise apps
- ▸Offer paid software downloads
- ▸Freemium or subscription models
- ▸Prototyping and client demos
Productivity Tips
- ▸Reuse Node.js modules across apps
- ▸Keep UI lightweight for performance
- ▸Use frontend frameworks for maintainable code
- ▸Automate builds with npm scripts
- ▸Package per OS for easier distribution
Basic Concepts
- ▸package.json: defines app name, version, window settings
- ▸Main window: entry HTML file rendered in Chromium
- ▸Node.js modules: provide backend capabilities
- ▸Native integration: file system, notifications, menus
- ▸Packaging: create standalone executables for platforms