This application is a fully client-side web application designed to meticulously replicate the look, feel, and functionality of the classic Notepad++ desktop software within a browser sandbox.
While built primarily for the web, it also features a native desktop release for Windows, macOS, and Linux!
| Windows | macOS | Linux | WebApp | |||
|---|---|---|---|---|---|---|
 Portable (Live) 70.4 MB |
 Setup (Live) 63.9 MB |
 DMG (Live) 103 MB |
 RPM (Live) 120 MB |
 DEB (Live) 90.1 MB |
 AppImage (Live) 117 MB |
 Open Website Online |
 Portable (Offline) 70.4 MB |
 Setup (Offline) 63.9 MB |
 DMG (Offline) 103 MB |
 RPM (Offline) 120 MB |
 DEB (Offline) 90.1 MB |
 AppImage (Offline) 117 MB |
|
|
🌐 Embed this WebApp on your own site: <iframe src="https://notepad-plus-plus.ywa.app/" width="100%" height="600px" style="border:none;"></iframe> |
||||||
The interface is divided into five primary horizontal zones, strictly matching the native Scintilla-based UI.
The Menu Bar
The top-level navigation bar has been stripped of standard web CSS :hover states. Instead, it utilizes a "Click-to-Open" state tracker. You must click a root menu (e.g., File) to open it. Once open, you can glide your mouse across the other root menus (Edit, View, Settings, etc.) to fluidly switch between them, mimicking a native OS application window.
The Toolbar
The toolbar contains 32 quick-action buttons utilizing official proxy-routed resource icons. The buttons feature a custom pointer-events: none image lock, ensuring that clicking the icon perfectly triggers the underlying button mechanics.
- Active States: Features like Word Wrap and Macro Recording will change the background color of their respective toolbar buttons when active.
The Status Bar Located at the absolute bottom of the screen, the Status Bar updates in real-time as you type, click, or change settings. It displays:
- Document Type: (e.g., "Normal text file", "JAVASCRIPT source file")
- Document Metrics: Total length (character count) and total line count.
- Cursor Position: Current Line (
Ln), Column (Col), and absolute character Position (Pos). - Encoding & EOL: Displays the active Line Ending format (CR LF) and character encoding (UTF-8).
The Grid-Snapping Word Wrap Engine
Word wrapping in a web browser is notoriously difficult to align with line numbers because standard HTML and <textarea> elements calculate word breaks differently. This clone solves this using a Shadow DOM Engine.
- How it works: When Word Wrap is enabled, the app generates an invisible, mathematically identical
<div>behind the text area. Aggressive CSS forces the browser to wrap text at the exact same physical pixel in both layers. - Anti-Drift Technology: The engine measures the browser's native wrap height and aggressively rounds it to the nearest exact multiple of the font's line-height (
Math.round(h / lh) * lh), making vertical sub-pixel drifting mathematically impossible.
Vibrant Syntax Highlighting
The editor intercepts your keystrokes and feeds them through a customized PrismJS lexer. We have overridden the default web-safe colors to perfectly match the harsh, vibrant C++ Scintilla highlighter used in the native desktop app (Pure Blue for tags, Pure Red for attributes, Green for comments).
RTL / LTR Text Direction
For users working with Right-to-Left languages, the editor supports dynamic direction flipping (Ctrl+Alt+R / Ctrl+Alt+L). This injects a native CSS state that instantly flips the text area, the highlight layer, and the invisible word-wrap shadow to align perfectly to the right side of the screen.
Dynamic Tab States & Renaming The Tab Bar allows infinite multi-tasking.
- Save States: Tabs feature dynamic floppy disk icons. A saved/unmodified tab displays a Blue disk. Once you type a character, it instantly swaps to a Red disk.
- Renaming: Right-clicking any tab intercepts the browser's native context menu and spawns a custom prompt allowing you to rename the file instantly.
Smart Saving & Extensions
When you select File > Save As, the application prompts you for a name. If you do not provide a file extension (like .txt), the editor checks your currently selected language from the Language menu (e.g., Python, Batch, Hollywood) and automatically appends the correct extension (.py, .bat, .hws) before pushing the download to your local machine.
Hexadecimal BOM Injection
If you alter the file encoding via the Encoding menu (e.g., to UTF-8 BOM or UTF-16 LE BOM), the saving engine intercepts the download Blob and physically injects the raw Hexadecimal Byte Order Mark (0xEF, 0xBB, 0xBF etc.) into the first bytes of the file.
Session Management
- Save Session: Compiles all open tabs, their contents, active states, and titles into a structured
.jsonworkspace file and downloads it. - Load Session: Uploading a previously saved
.jsonsession file will instantly reconstruct your entire workspace, restoring all tabs and text.
Universal Find & Replace
Accessed via Ctrl+F or Ctrl+H, the custom Search Modal is fully draggable and supports complex matching.
- Regex Generation: Toggling "Match case" or "Wrap around" dynamically alters the JavaScript regular expression flags (
gvsgi) on the fly to execute mathematically perfect search-and-replace operations.
Jump Navigation
- Go To Line (
Ctrl+G): Prompts for a line number, loops through the text array to calculate the exact string index character position, and forces the blinking cursor to teleport to that exact line.
Live Macro Recorder The editor features a sequential memory engine capable of recording your keystrokes.
- Recording: Click Start Recording (the toolbar button will turn red, and the window title will change to
[RECORDING MACRO...]). It tracks typing, backspaces, deletes, line breaks, and even clipboard pasting. - Playback: Press
Ctrl+Shift+Pto execute your recorded macro instantly, or use Run a Macro Multiple Times... to loop the recorded keystrokesXamount of times.
Cryptographic Hash Generators Located under Tools, the editor utilizes the CryptoJS library to generate enterprise-grade hashes.
- Highlight a string of text and select MD5, SHA-1, SHA-256, or SHA-512 to instantly generate the hash.
- If no text is highlighted, the engine will spawn a custom prompt asking for the string you wish to encrypt.
Base64 & Hex Converters
Found under Plugins > MIME Tools / Converter, you can instantly encode or decode highlighted text into Base64 blocks, or convert standard ASCII characters into spaced Hexadecimal strings.
The Preferences Modal Accessed via Settings > Preferences, this draggable modal features a classic sidebar layout allowing you to customize the editor engine.
- Typography: Dynamically change the Font Size, Font Family (Courier New, Consolas, Lucida Console), and Tab Spacing size. Changes cascade instantly through the DOM without breaking word-wrap alignments.
- Editor Settings: Toggle Word Wrap, Line Numbers, Native Browser Spellchecker (red squiggly lines), and Status Bar visibility.
Shortcut Mapper
Found under Settings > Shortcut Mapper, this spawns a modal containing a cleanly formatted, scrollable CSS grid documenting all 28 active keyboard shortcuts actively mapped to the application's event listeners.
Distraction Free & Post-It Modes For ultimate focus, these view modes strip away the Menu Bar, Toolbar, Tab Bar, and Status Bar.
- Distraction Free: Enters native OS Fullscreen and hides all UI.
- Post-It Mode (
F12): Hides all UI but keeps the window in its standard browser state. - Exit Hint: When active, a sleek, semi-transparent button floats in the top right corner reading "Press ESC or Click to Exit", ensuring users never get trapped in the UI-less state.
Because this is a web-browser-based clone, certain native C++ desktop features are physically impossible to execute (e.g., reading local system directories, parsing C++ DLL plugins, or utilizing OS-level threading).
Rather than clicking a button and having nothing happen, the application features an Explanation Routing Engine. When you click an impossible feature (like Plugins Admin, Folder as Workspace, or Code Folding), the engine analyzes the request and spawns a window explaining the exact technical reason why a browser sandbox prevents that specific feature, advising the user to download the native Windows application.
We haven't just packaged a website; we’ve built a native bridge that integrates with your operating system's file manager, context menus, and native UI conventions.
We offer two flavors for every operating system:
- 🌐 Live Editions: Lightweight binaries that act as a native shell and loads the app directly from GitHub Pages. They require an internet connection but will always have the latest features without needing to re download the app.
- 🛑 Offline Editions: Fully bundled. These contain all HTML/JS/CSS assets locally. They are larger in size but work without an internet connection.
🪟 Windows
- Installers (Wizard-based): Installs cleanly to your system, adds a shortcut to the Start Menu > Programs, and natively integrates an "Open with Notepad++" button to your Windows right-click context menu!
- Portables (Single-File SFX): A completely portable, single
.exefile with the normal app icon. Built using an optimized WinRAR SFX archive with "Store" compression for lightning-fast, silent startup. It quietly extracts to your Windows Temp folder, runs the app, and automatically cleans up its files the second you close it.
🍏 macOS (Intel / rosetta2)
|
|
|
|
|
🐧 Linux
- Debian/Ubuntu (.deb) & RedHat/SUSE (.rpm): Full system installers. These packages automatically handle placing
.desktopshortcuts in your application launcher and assigning the correct system icons. - AppImages (.AppImage): The gold standard for Linux portability. A single, standalone file that runs on almost any distribution. Just download, allow execution (
chmod 775), and double-click to run.
- Dynamic OS Theming: Sharp Windows 11 icons or macOS "Traffic Light" dots depending on your system. Live Switcher included.
- Native File Saving: Overrides browser prompts entirely using Node.js
fs.writeFileSync. HitCtrl+Sto instantly overwrite the file on your drive. - Multi-Method Loading: Right-click context menus, Drag & Drop files, or use standard dialogs. A built-in Gatekeeper prevents binary files from crashing the editor.
- macOS Menu Bridge: Maps the HTML menu 1:1 into the native Apple Menu Bar at the top of your screen.
- Dynamic Title Bar: Updates to
<path> - Notepad++and supports single-instance tab routing (double-clicking a file routes it to your open window). - Splash Screen: Masks Chromium initialization with a native-feeling loading overlay.
Because the core application relies entirely on client-side Vanilla JavaScript, no build steps, Node packages, or servers are required.
- Clone or download the repository.
- Ensure
index.html,style.css, andscript.jsare in the same folder. - Simply double-click
index.htmlto open it in your default web browser.
index.html: Contains the structural DOM, UI elements, modals, SVG proxy icons, and external library CDN links.style.css: Houses the native desktop UI resets, draggable window styling, CSS-grid math variables, and the custom Scintilla-style syntax highlighting overrides.script.js: The central brain. Handles array-based state management, DOM manipulation, asynchronous dialog routing, macro recording arrays, and the word-wrap mathematical engine.
This project was made possible by the following open-source projects and software tools:
- Prism.js: Provides the lightweight, robust syntax highlighting engine.
- Crypto-JS: Powers the built-in hash generation tools.
- Vanilla HTML5 / CSS3 / JavaScript: The core editor uses native web technologies without heavy frontend frameworks.
- NW.js: The core framework bridging the Chromium browser engine with the native OS.
- Node.js: Powers the backend of the Host wrapper (
fsandpathmodules). - Notepad++: The legendary text editor created by Don Ho that inspired this project.
- Inno Setup: Used to compile the Windows Setup wizards and inject context menus.
- WinRAR: The decompression engine behind the zero-install Windows Portable (SFX) executables.
- AppImageTool: Used to package the Linux standalone portable binaries.