Fast, lightweight, cross-platform message box - Rust-powered alternative to msgview
npm install @bobfrankston/msgerbash
npm install @bobfrankston/msger
`
For global CLI usage:
`bash
npm install -g @bobfrankston/msger
`
Supported Platforms:
- Windows (x64)
- Linux (x64)
- Linux (ARM64 / Raspberry Pi)
---
Command Line Usage
The msger command-line tool provides a quick way to display message boxes from shell scripts, batch files, or terminal.
Basic Examples
`bash
Simple message
msger -message "Hello, World!"
msger Hello World # shorthand - words become message
With HTML content
msger -html "Welcome!
This is HTML
"
Colored text with inline styles
msger -html "Alert!"
Load a URL (web page or local file)
msger -url "https://example.com"
msger -url "file:///path/to/page.html"
Load URL with hash fragment
msger -url "https://example.com" -hash section1
msger -url "https://example.com" -hash "#intro"
With input field and placeholder
msger -message "Enter your name:" -input "Your name here" -default "John"
Custom buttons
msger -message "Save changes?" -buttons Yes No Cancel
With custom size and position
msger -message "Hello" -size 800,600 -pos 100,100
Always on top with zoom
msger -message "Important!" -ontop -zoom 150
Detached URL browser (stays open after script exits)
msger -url "https://example.com" -detach
Fullscreen mode
msger -fullscreen -url "https://example.com"
Multi-monitor (Windows only - show on second screen)
msger -message "Second screen" -pos 0,100 -screen 1
Auto-close timeout
msger -message "Closing in 5 seconds..." -timeout 5
Open with DevTools for debugging (automatically opens DevTools panel)
msger -url "https://example.com" -dev
See all options
msger --help
`
JSON Configuration Files
You can store message box configuration in a JSON file for reuse. JSON files support comments (JSON5 format).
`bash
Load configuration from file
msger -load config.json
Override specific values from loaded config
msger -load config.json -title "New Title" -size 800,600
Save current command-line options to a file (only saves explicitly specified values)
msger -title "My Dialog" -message "Hello" -buttons Yes No -save my-config.json
Save config without showing the message box (uses -noshow)
msger -title "My Dialog" -message "Hello" -buttons Yes No -save my-config -noshow
Load base config, override, and save the overrides
msger -load base.json -title "Modified" -save modified.json
Save and show (saves config then displays the message box)
msger -title "Test" -message "Saving config..." -save test.json
`
Notes:
- The -save option saves only the explicitly specified command-line arguments, not derived defaults. This keeps config files minimal and allows defaults to evolve.
- Use -noshow with -save to create config files without displaying the message box.
- File extensions: If you don't specify .json, it will be added automatically (e.g., myconfig becomes myconfig.json).
$3
`json
{
"title": "Window Title",
"message": "Plain text message (supports ANSI color codes)",
"html": "HTML content
Rich formatting
",
"url": "https://example.com",
"hash": "section1",
"size": {
"width": 600,
"height": 400
},
"pos": {
"x": 100,
"y": 100,
"screen": 0
},
"buttons": ["Cancel", "OK"],
"defaultValue": "default input text",
"inputPlaceholder": "Enter text here...",
"allowInput": false,
"timeout": 30,
"autoSize": false,
"alwaysOnTop": false,
"fullscreen": false,
"zoom": 100,
"debug": false,
"icon": "path/to/icon.png",
"dev": false
}
`
$3
| Field | Type | Default | Description |
|-------|------|---------|-------------|
| title | string | "Message" | Window title |
| message | string | null | Plain text message (supports ANSI color codes) |
| html | string | null | HTML content to display |
| url | string | null | URL to load (web or file://) |
| hash | string | null | Hash fragment to append to URL (requires url). Leading # is optional. |
| size | object | {"width": 600, "height": 400} | Window size |
| size.width | number | 600 (or 1024 for URLs) | Window width in pixels |
| size.height | number | 400 (or 768 for URLs) | Window height in pixels |
| pos | object | null | Window position |
| pos.x | number | - | X coordinate in pixels |
| pos.y | number | - | Y coordinate in pixels |
| pos.screen | number | null | [Windows only] Screen index (0=primary, 1=second, etc.) |
| buttons | string[] | ["OK"] | Button labels |
| defaultValue | string | null | Default input value |
| inputPlaceholder | string | null | Placeholder text for input field |
| allowInput | boolean | false | Show input field |
| timeout | number | null | Auto-close after N seconds |
| autoSize | boolean | true when no size | Auto-resize window to fit content |
| alwaysOnTop | boolean | false | Keep window on top |
| fullscreen | boolean | false | Start in fullscreen mode |
| zoom | number | 100 | Initial zoom level (100=100%, 150=150%) |
| debug | boolean | false | Return debug info in result |
| icon | string | null | Path to window icon (.png, .ico) |
| dev | boolean | false | Open DevTools automatically (for debugging HTML/URL content) |
Content Priority: Only one content type will be displayed (in order):
1. url - If provided, loads URL (ignores message/html)
2. html - If provided, displays HTML (ignores message)
3. message - Plain text with ANSI color support
Backward Compatibility: The old width and height fields (at the top level) are still supported for backward compatibility, but the size object is preferred. If both are provided, size takes precedence.
$3
Simple dialog:
`json
{
"title": "Confirm",
"message": "Are you sure?",
"buttons": ["Cancel", "OK"]
}
`
Input dialog:
`json
{
"title": "Enter Name",
"message": "Please enter your name:",
"allowInput": true,
"inputPlaceholder": "Your name here",
"defaultValue": "John Doe",
"buttons": ["Cancel", "Submit"]
}
`
HTML content:
`json
{
"title": "Welcome",
"html": "Welcome!
Getting started...
",
"size": {
"width": 700,
"height": 500
}
}
`
Positioned window on second monitor:
`json
{
"message": "Second screen",
"pos": {
"x": 0,
"y": 100,
"screen": 1
}
}
`
CLI Options Reference
`
Usage: msger [options] [message words...]
Options:
-message, --message Plain text message
-title, --title Window title
-html, --html HTML content
-url, --url URL to load (web or file://)
-hash, --hash Hash fragment to append to URL (requires -url). Leading # optional.
-buttons, --buttons Button labels (e.g., -buttons Yes No Cancel)
-ok, --ok Add OK button
-cancel, --cancel Add Cancel button
-input, --input [placeholder] Include input field with optional placeholder text
-default, --default Default value for input field
-size, --size Window size (e.g., -size 800,600)
-pos, --pos Window position (e.g., -pos 100,200)
-screen, --screen [Windows only] Screen index (0=primary, 1=second, etc.)
-zoom, --zoom Zoom level as percentage (e.g., -zoom 150 for 150%)
-timeout, --timeout Auto-close after specified seconds
-ontop, --ontop Keep window always on top
-detach, --detach Launch window independently (parent returns immediately)
-fullscreen, --fullscreen Start window in fullscreen mode (F11 to toggle, Escape to exit)
-debug, --debug Return debug info (HTML, size, autoSize) in result
-v, -version, --version Show version number
-help, -?, --help Show help message
Keyboard Shortcuts:
- Enter: Click default (last) button
- Escape: Dismiss dialog or exit fullscreen
- F11: Toggle fullscreen mode
- F12: Open developer tools (DevTools/Inspect)
- Ctrl+Wheel/Plus/Minus: Zoom in/out
- Ctrl+0: Reset zoom to 100%
Debug Mode:
- Set environment variable MSGER_DEBUG=1 for diagnostic output
- Shows: startup info, keyboard events, IPC messages, button clicks
- Example (PowerShell): $env:MSGER_DEBUG=1; msger "Test"
- Zero performance impact when disabled
Notes:
- If no options provided, all non-option arguments are concatenated as message
- Press ESC to dismiss (returns button: "dismissed")
- Press Enter to click last (default) button
- OK button is green by default
- URLs default to 1024x768 window size
- Window title automatically updates from loaded page's tag when using -url
<br /> - Windows auto-size to fit content when size not specified
<br /> - Runtime zoom: Ctrl+Wheel, Ctrl+Plus, Ctrl+Minus
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">Node.js API Reference</h1>
<br />
<br />Use msger in your Node.js or TypeScript applications with a simple Promise-based API.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Quick Start</h2>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />import { showMessageBox } from '@bobfrankston/msger';
<br />
<br />const result = await showMessageBox({
<br /> title: 'Confirm Action',
<br /> message: 'Are you sure you want to proceed?',
<br /> buttons: ['Cancel', 'OK']
<br />});
<br />
<br />console.log('User clicked:', result.button);
<br />
<br />if (result.value) {
<br /> console.log('User entered:', result.value);
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Close message boxes programmatically from the parent process:
<br />
<br /><strong>Handle-based API (Recommended):</strong>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />import { showMessageBoxEx } from '@bobfrankston/msger';
<br />
<br />const handle = showMessageBoxEx({
<br /> message: 'Processing...',
<br /> buttons: ['Cancel']
<br />});
<br />
<br />console.log('Dialog PID:', handle.pid);
<br />
<br />// Close after 5 seconds
<br />setTimeout(() => {
<br /> handle.close();
<br />}, 5000);
<br />
<br />// Wait for result
<br />const result = await handle.result;
<br />// Result: {button: 'closed', closed: true} if closed programmatically
<br />// Result: {button: 'Cancel'} if user clicked Cancel
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><strong>Standalone close function:</strong>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />import { showMessageBoxEx, closeMessageBox } from '@bobfrankston/msger';
<br />
<br />const handle = showMessageBoxEx({ message: 'Working...' });
<br />const pid = handle.pid;
<br />
<br />// Close by PID from anywhere
<br />closeMessageBox(pid);
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><strong>Use cases:</strong>
<br />- Progress dialogs that auto-close when task completes
<br />- Timeout-based notifications
<br />- Managing multiple dialogs by PID
<br />- Detached dialogs closed remotely
<br />
<br />See <a href="CLOSE-API.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">CLOSE-API.md</a> for complete documentation.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">API Functions</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Display a message box dialog and wait for user response.
<br />
<br />#### MessageBoxOptions
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />interface MessageBoxOptions {
<br /> title?: string; // Window title (default: "Message")
<br /> message?: string; // Plain text message (optional if url or html provided)
<br /> html?: string; // HTML content to display
<br /> url?: string; // URL to load (web URL or file:// path)
<br /> hash?: string; // Hash fragment to append to URL (requires url). Leading # optional.
<br /> size?: { // Window size in pixels
<br /> width: number; // Window width (default: 600, or 1024 for URLs)
<br /> height: number; // Window height (default: 400, or 768 for URLs)
<br /> };
<br /> pos?: { // Window position
<br /> x: number; // X coordinate in pixels
<br /> y: number; // Y coordinate in pixels
<br /> screen?: number; // [Windows only] Screen index (0=primary, 1=second, etc.)
<br /> };
<br /> buttons?: string[]; // Button labels (default: ["OK"])
<br /> defaultValue?: string; // Default input value
<br /> inputPlaceholder?: string; // Placeholder text (gray hint) for input field
<br /> allowInput?: boolean; // Show input field (default: false)
<br /> autoSize?: boolean; // Auto-resize window to fit content (default: true when no size specified)
<br /> alwaysOnTop?: boolean; // Keep window on top of other windows (default: false)
<br /> zoom?: number; // Initial zoom level (100=100%, 150=150%, 50=50%)
<br /> timeout?: number; // Auto-close after N seconds
<br /> detach?: boolean; // Launch detached from parent process
<br /> fullscreen?: boolean; // Start window in fullscreen mode (F11 to toggle)
<br /> debug?: boolean; // Return debug info (HTML, size, autoSize) in result
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />#### MessageBoxResult
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />interface MessageBoxResult {
<br /> button: string; // Label of clicked button
<br /> value?: string; // Input value (if allowInput was true)
<br /> form?: object; // Form data (if form elements present)
<br /> closed?: boolean; // True if closed programmatically via handle.close()
<br /> dismissed?: boolean; // True if user pressed Escape
<br /> timeout?: boolean; // True if closed due to timeout
<br /> debug?: { // Debug info (if debug option was true)
<br /> html: string; // Generated HTML content
<br /> width: number; // Window width
<br /> height: number; // Window height
<br /> autoSize: boolean; // Whether auto-sizing is enabled
<br /> };
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">API Examples</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />const result = await showMessageBox({
<br /> title: 'Delete File',
<br /> message: 'Are you sure you want to delete this file?',
<br /> buttons: ['Cancel', 'Delete']
<br />});
<br />
<br />if (result.button === 'Delete') {
<br /> // Perform deletion
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />const result = await showMessageBox({
<br /> title: 'Enter Name',
<br /> message: 'Please enter your name:',
<br /> allowInput: true,
<br /> inputPlaceholder: 'Your name here',
<br /> defaultValue: 'John Doe',
<br /> buttons: ['Cancel', 'OK']
<br />});
<br />
<br />if (result.button === 'OK') {
<br /> console.log('Name entered:', result.value);
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />const result = await showMessageBox({
<br /> title: 'Welcome',
<br /> html: </code>
<br /> <div style="font-family: sans-serif;">
<br /> <h2 style="color: #2563eb;">Welcome!</h2>
<br /> <p>This supports <strong>HTML</strong> content.</p>
<br /> <ul>
<br /> <li>Rich formatting</li>
<br /> <li>Custom styles</li>
<br /> <li>Any HTML elements</li>
<br /> </ul>
<br /> </div>
<br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,
<br /> size: { width: 700, height: 500 },
<br /> buttons: ['Close']
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Plain text messages automatically support ANSI color escape sequences, which are converted to HTML with proper colors:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />const result = await showMessageBox({
<br /> title: 'Color Test',
<br /> message: '\x1b[31mRed text\x1b[0m\n\x1b[32mGreen text\x1b[0m\n\x1b[1m\x1b[34mBold blue\x1b[0m',
<br /> buttons: ['OK']
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />Supported ANSI codes:
<br />- <strong>Colors</strong>: Red (31), Green (32), Yellow (33), Blue (34), Magenta (35), Cyan (36), White (37)
<br />- <strong>Styles</strong>: Bold (1), Underline (4), Reset (0)
<br />- <strong>Backgrounds</strong>: 40-47 (same color numbers as foreground)
<br />
<br />CLI example:
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br />echo -e "\x1b[31mError:\x1b[0m Something went wrong" | msger
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Load external website
<br />// Note: Window title automatically updates from page's <title> tag
<br />await showMessageBox({
<br /> url: 'https://github.com/BobFrankston/msger',
<br /> size: { width: 1024, height: 768 }
<br />});
<br />
<br />// Load local HTML file
<br />await showMessageBox({
<br /> url: 'file:///path/to/help.html',
<br /> size: { width: 800, height: 600 }
<br />});
<br />
<br />// Load with DevTools opened automatically (for debugging)
<br />await showMessageBox({
<br /> url: 'https://example.com',
<br /> dev: true, // Opens DevTools automatically
<br /> size: { width: 1024, height: 768 }
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Show notification that auto-closes after 3 seconds
<br />// A translucent countdown indicator appears in the top-right corner
<br />const result = await showMessageBox({
<br /> title: 'Notification',
<br /> message: 'File saved successfully!',
<br /> timeout: 3,
<br /> buttons: ['OK']
<br />});
<br />
<br />if (result.timeout) {
<br /> console.log('Notification auto-closed');
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />The countdown timer displays as a subtle yellow badge in the top-right corner, showing the remaining seconds (e.g., "10s", "9s", "8s"...).
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />const result = await showMessageBox({
<br /> title: 'User Registration',
<br /> html: </code>
<br /> <form>
<br /> <label>Name: <input name="name" required /></label><br>
<br /> <label>Email: <input name="email" type="email" required /></label><br>
<br /> <label>Age: <input name="age" type="number" /></label>
<br /> </form>
<br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,
<br /> buttons: ['Cancel', 'Submit']
<br />});
<br />
<br />if (result.button === 'Submit' && result.form) {
<br /> console.log('Name:', result.form.name);
<br /> console.log('Email:', result.form.email);
<br /> console.log('Age:', result.form.age);
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Position at specific coordinates
<br />await showMessageBox({
<br /> message: 'Positioned window',
<br /> pos: { x: 100, y: 100 }
<br />});
<br />
<br />// Position on second monitor (Windows only)
<br />await showMessageBox({
<br /> message: 'On second screen',
<br /> pos: { x: 0, y: 100, screen: 1 }
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Keep window on top with 150% zoom
<br />await showMessageBox({
<br /> title: 'Important Alert',
<br /> message: 'This window stays on top!',
<br /> alwaysOnTop: true,
<br /> zoom: 150
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Window automatically sizes to fit content
<br />await showMessageBox({
<br /> message: 'Short message',
<br /> autoSize: true // default when size not specified
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Launch URL window that stays open after script exits
<br />await showMessageBox({
<br /> url: 'https://example.com',
<br /> size: { width: 1200, height: 800 },
<br /> detach: true,
<br /> alwaysOnTop: true
<br />});
<br />// Script continues/exits immediately, window stays open
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript
<br />// Launch window in fullscreen mode (like F11 in browser)
<br />await showMessageBox({
<br /> url: 'https://example.com',
<br /> fullscreen: true
<br />});
<br />// Users can press F11 to toggle fullscreen or Escape to exit
<br />
<br />// Fullscreen with message
<br />await showMessageBox({
<br /> message: 'Full screen presentation',
<br /> fullscreen: true,
<br /> buttons: ['Close']
<br />});
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2>
<br />
<br />- ✅ Display plain text, HTML content, or load URLs
<br />- ✅ Full HTML/CSS support
<br />- ✅ ANSI color codes (colored terminal output)
<br />- ✅ Customizable buttons
<br />- ✅ Input fields and forms
<br />- ✅ Auto-close with timeout
<br />- ✅ Window positioning and sizing
<br />- ✅ Multi-monitor support (Windows)
<br />- ✅ Always on top mode
<br />- ✅ Zoom control
<br />- ✅ Fullscreen mode
<br />- ✅ TypeScript type definitions
<br />- ✅ Keyboard shortcuts (Enter, Escape, F11, F12)
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Why msger?</h2>
<br />
<br />- <strong>Fast</strong> - Opens in under 200ms
<br />- <strong>Small</strong> - Only a few MB installed
<br />- <strong>Simple</strong> - Easy Promise-based API
<br />- <strong>Flexible</strong> - Plain text, HTML, or load URLs
<br />- <strong>Cross-platform</strong> - Works on Windows and Linux
<br />
<br />For technical details and performance metrics, see <a href="DEVELOPERS.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">DEVELOPERS.md</a>.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">msger vs msgview</h2>
<br />
<br />This package is the <strong>Rust/wry-based</strong> implementation. There's also <strong><a href="https://www.npmjs.com/package/@bobfrankston/msgview" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@bobfrankston/msgview</a></strong> - an Electron-based alternative with the same API.
<br />
<br />| Aspect | msger (this) | msgview |
<br />|--------|--------------|---------|
<br />| <strong>Startup</strong> | ~50-200ms | ~2-3 seconds |
<br />| <strong>Size</strong> | ~5-10MB | ~200MB |
<br />| <strong>Technology</strong> | Rust + wry (WebView2/webkit2gtk) | Electron |
<br />| <strong>Pi/Linux</strong> | ❌ Rendering issues | ✅ Perfect |
<br />| <strong>Windows/WSL</strong> | ✅ Works | ✅ Works |
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />- Speed is critical (CLI tools, automation)
<br />- Small binary size matters
<br />- Windows or WSL environment
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />- Running on Raspberry Pi or Linux
<br />- Need reliable cross-platform rendering
<br />- Prefer Electron ecosystem
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />Both packages will share a common JavaScript API (</code>window.msgapi<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) for file system access, window manipulation, and bidirectional communication. See <a href="TODO.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">TODO.md</a> for details.
<br />
<br />For the complete feature comparison and roadmap, see the <a href="../msgview/TODO.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">shared TODO.md</a> which tracks both projects.
<br />
<br />---
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">Additional Information</h1>
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Important Notes</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /><strong>Icon Behavior Differences:</strong>
<br />- <strong>Window Title Bar</strong>: Shows custom icon from </code>-icon<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> flag or JSON config
<br />- <strong>Windows Taskbar</strong>: Shows the embedded msger.exe icon (cannot be changed at runtime)
<br />
<br />This is a Windows limitation for native applications. The taskbar icon comes from the executable's embedded resource, not the runtime window icon. In contrast, Electron-based msgview can set taskbar icons dynamically.
<br />
<br /><strong>Workaround:</strong> The planned </code>-pin<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> feature with AppUserModelID will allow each pinned shortcut to have its own taskbar icon.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />⚠️ <strong>msger is designed for displaying trusted, friendly content</strong> (local apps, your HTML files). It is NOT a secure sandbox for untrusted/hostile web content. Use </code>-htmlfrom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>-url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with trusted sources only.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /><strong>Minimal API</strong> - Most functionality uses native browser APIs:
<br />- </code>msger.isAvailable()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Feature detection (returns true in msger)
<br />- </code>msger.close()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Same as </code>window.close()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (native API preferred)
<br />
<br /><strong>Recommendation:</strong> Use native browser APIs (</code>localStorage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>window.close()`) for compatibility. Code will work in any browser context, not just msger.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">For Developers</h2>
<br />
<br />- <strong>Building & Architecture</strong>: See <a href="DEVELOPERS.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">DEVELOPERS.md</a>
<br />- <strong>Technical Status & Roadmap</strong>: See <a href="TODO.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">TODO.md</a>
<br />- <strong>Native Binary Documentation</strong>: See <a href="msger-native/README.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">msger-native/README.md</a>
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2>
<br />
<br />ISC
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Author</h2>
<br />
<br />Bob Frankston
<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"29:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.3\"}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":1}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^24.9.1\"}]]}]]}]}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>