.png)
4 months ago
7
A modern source code viewer built with Electron, featuring syntax highlighting, directory browsing, and interactive navigation tools.
- 📄 Source Code Viewing - View source files with syntax highlighting for 20+ languages
- 📁 Directory Browser - Navigate directories with visual grid layout and file icons
- 🔗 Interactive Navigation - Click folders to browse, parent directory navigation
- 📑 Multi-Tab Interface - Open multiple files and directories simultaneously
- 🗺️ Interactive Minimap - Visual overview with click-to-navigate functionality
- 🖼️ Image Support - Display images directly in the viewer
- 📄 PDF Integration - Opens PDFs in system default viewer
- 🛡️ Binary File Protection - Safely handles binary files without crashing
- ⌨️ Keyboard Shortcuts - Full keyboard navigation support
- 🎨 Dark Theme - Professional dark theme optimized for code viewing
# Clone the repository
git clone <repository-url>
cd sourceview
# Install dependencies
npm install
# Run the application
npm start
# Open current directory
electron .
# Open specific file
electron . /path/to/file.js
# Open specific directory
electron . /path/to/directory
- Open File/Directory: Ctrl+O or toolbar button
- Parent Directory: ↑ Up button (when available)
- Close Tab: Ctrl+W
- Next Tab: Ctrl+Tab
- Previous Tab: Ctrl+Shift+Tab
- Click anywhere on the minimap to jump to that location in the file
- Viewport indicator shows current visible area
- Automatically scales to file content
JavaScript, TypeScript, Python, Java, C/C++, C#, PHP, Ruby, Go, Rust, Swift, Kotlin, Scala
HTML, CSS, SCSS, SASS, Vue, Svelte
JSON, XML, YAML, CSV, SQL
Markdown, Plain Text, PDF
PNG, JPG, GIF, SVG, WebP, ICO, BMP
- Main Process (main.js) - Electron main process handling file operations
- Renderer Process (renderer.js) - UI logic and file display
- Styling (styles.css) - Dark theme and responsive layout
- UI (index.html) - Application structure with custom title bar
The application is built with:
- Electron - Desktop application framework
- Highlight.js - Syntax highlighting
- Node.js fs - File system operations
- HTML5 Canvas - Minimap rendering
