A CLI tool to preview HTML, JS, and TS files in an Electron window with auto-reload
npm install @berhalak/previewA powerful CLI tool that instantly opens and previews .html, .js, and .ts files in an Electron window with automatic hot-reloading.
- 🚀 Instant Preview - Open any HTML, JavaScript, or TypeScript file in seconds
- 🔄 Auto-Reload - Automatically reloads when files change
- 📦 TypeScript Support - Automatic transpilation using esbuild
- 🔥 Hot Module Reloading - Fast feedback loop for rapid development
- 🎯 Simple CLI - Just one command to preview any file
- ✨ Reload Toast - Visual feedback when files reload
- 🎛️ Menu API - Customize application menus from your scripts
bash
npm install
`$3
bash
npm install -g .
`After global installation, the
command will be available system-wide.🚀 Usage
$3
`bash
preview
`$3
bash
Preview an HTML file
preview index.htmlPreview a JavaScript file
preview app.jsPreview a TypeScript file (auto-transpiles)
preview demo.ts
`🎯 How It Works
$3
- Loads directly using Electron's
- Watches for changes and reloads automatically$3
- Wraps in a minimal HTML template
- Loads the script and executes it
- Watches for changes and reloads$3
- Transpiles to JavaScript using esbuild
- Outputs to system temp directory ()
- Watches source files and rebuilds on changes
- Auto-reloads after successful transpilation📁 Project Structure
`
preview/
├── bin/
│ └── preview.js # CLI entry point with shebang
├── src/
│ ├── main.js # Electron main process
│ ├── previewServer.js # File watcher & esbuild transpiler
│ └── renderer.html # HTML wrapper template for JS/TS
├── package.json
├── tsconfig.json
└── README.md
🛠️ Technical Details
$3
- electron - Cross-platform desktop app framework
- esbuild - Fast TypeScript/JavaScript bundler
- chokidar - Efficient file watcher$3
- Default size: 800×600 pixels
- Resizable window
- DevTools open by default
- Node.js integration enabled ()
- Context isolation disabled for direct Node.js access$3
The tool watches for changes in:
- The main file being previewed
- CSS files in the same directory
- Related TypeScript/JavaScript files$3
- Compiled TypeScript outputs are saved to system temp directory
- Location: os.tmpdir()/preview-electron/
- Automatically cleaned up when the app closes🎨 Example Files
$3
typescript
document.body.innerHTML = Edit this file and watch it reload automatically.
Current time: ${new Date().toLocaleTimeString()}
;setInterval(() => {
const timeEl = document.querySelector('p:last-child');
if (timeEl) {
timeEl.textContent =
Current time: ${new Date().toLocaleTimeString()};
}
}, 1000);
`$3
javascript
document.body.innerHTML = Changes auto-reload instantly.
;
`$3
html
Preview Demo
Hello from HTML! 🌟
Edit and save to see changes instantly.
`🎛️ Preview API
When running JavaScript or TypeScript files, a global
object is available to interact with the preview window.$3
`typescript
// Set a complete custom menu
PreviewAPI.setMenu([
{
label: 'File',
submenu: [
{ label: 'Action 1', id: 'action1', accelerator: 'CmdOrCtrl+1' },
{ label: 'Action 2', id: 'action2', accelerator: 'CmdOrCtrl+2' },
{ type: 'separator' },
{ label: 'Quit', role: 'quit' }
]
},
{
label: 'View',
submenu: [
{ label: 'Reload', role: 'reload' },
{ label: 'Toggle DevTools', role: 'toggleDevTools' }
]
}
]);// Add a single menu item
PreviewAPI.addMenuItem('Custom', [
{ label: 'Say Hello', id: 'hello', accelerator: 'CmdOrCtrl+H' },
{ label: 'Open DevTools', role: 'toggleDevTools' }
]);
// Handle menu actions
PreviewAPI.onMenuAction('action1', () => {
console.log('Action 1 triggered!');
alert('You clicked Action 1');
});
PreviewAPI.onMenuAction('hello', () => {
console.log('Hello from menu!');
});
`$3
Electron provides built-in menu roles:
-
- Quit the application
- reload - Reload the window
- toggleDevTools - Toggle developer tools
- resetZoom, zoomIn, zoomOut - Zoom controls
- And many more (see Electron documentation)$3
Run the menu demo to see it in action:
`bash
preview examples/menu-demo.ts
`🧪 Testing
bash
Test with a demo file
npm testOr manually test with your own files
preview examples/demo.html
preview examples/demo.js
preview examples/demo.ts
`🎯 Development Workflow
1. Create your HTML/JS/TS file
2. Run
3. Edit the file in your favorite editor
4. Save - watch it reload automatically! ✨
5. See the "Reloaded ✨" toast notification🔧 Troubleshooting
$3
If command is not found after global installation:
`bash
npm link
`$3
Make sure to provide the correct path to the file:
bash
Use absolute path
preview /full/path/to/file.tsOr relative path from current directory
preview ./src/app.ts
``MIT
Contributions are welcome! Feel free to open issues or submit pull requests.
---
Built with ❤️ using Electron, esbuild, and chokidar