This project celebrates 10 years (2016-2026) in Computer Science, specializing in Web Technology.

A journey of passion, persistence, and pure love for the craft—distilled into a comprehensive learning resource.

From SMK to 10 years of experience. From dropout to DevOps engineer. From struggle to mastery.

Not for profit, but for passion. Not for certificates, but for knowledge.

📖 Read the full journey

# Just open in browser - that's it!
open index.html

No npm, no build, no server needed! Pure client-side rendering.

💡 Note: Python server (server.py) is OPTIONAL - only for learning dynamic file loading.
The main app works 100% in browser without any server!

• macOS Sequoia - Latest macOS with gradient backdrop blur
• macOS Ventura - Classic macOS with traffic lights
• Windows 11 - Modern rounded corners with centered controls
• Windows 10 - Classic Windows with blue accent border
• Chrome OS - Material Design with circular buttons

• Dracula - Dark purple-gray theme
• Monokai - Classic dark brown theme
• GitHub - Clean light theme with proper syntax colors
• Nord - Arctic blue-gray theme

• ✅ Fira Code Ligatures - Beautiful programming ligatures (=>, ===, !=, <=, etc)
• ✅ Mermaid Diagrams - Flowcharts, sequence diagrams, and more
• ✅ KaTeX Math - Inline and block mathematical formulas
• ✅ Syntax Highlighting - Powered by Prism.js
• ✅ Custom Scrollbars - OS-specific scrollbar styles
• ✅ Watermark - Customizable size and opacity
• ✅ Drag & Drop - Drop markdown files directly
• ✅ Export PNG - High-quality 2x resolution
• ✅ Copy Image - Copy to clipboard (Chrome/Edge)

SnapCode is 100% CLIENT-SIDE! No server required for main functionality.

• ✅ Buildless - No npm, webpack, or build tools
• ✅ Serverless - Runs entirely in browser
• ✅ Componentless - No React/Vue/Svelte complexity
• ✅ Single File - Just 56KB HTML file
• ✅ CDN Dependencies - No node_modules bloat

While the app is buildless, we use development utilities for code quality:

• 🔍 HTMLHint - HTML validation and linting
• 🔧 ESLint - JavaScript linting with Alpine.js support
• 🎨 Prettier - Consistent code formatting
• ✅ Custom Validator - SnapCode-specific checks

Why? Teaching beginners that professional development includes quality tools, even for static sites. These are dev utilities, not runtime dependencies.

The server.py is OPTIONAL and only for:

• 📚 Learning dynamic file loading
• 📚 Backend/DevOps study case
• 📚 REST API concepts

Main app works perfectly without it!

📖 Read more: ARCHITECTURE.md

Visit sandikodev.github.io/snapcode and start creating!

# Clone or download index.html
# Open in browser - no build step required!
open index.html

That's it! No npm install, no build process, no dependencies to manage.

# Clone the repository
git clone https://github.com/sandikodev/snapcode.git
cd snapcode

# Install development utilities (linting, formatting, validation)
pnpm install

# Run quality checks
pnpm run check:main

# Open in browser
open index.html

💡 Learning Note: Even for static HTML projects, professional developers use quality tools. The pnpm install here installs development utilities only (not runtime dependencies). This teaches:

• Clean Development Environment - Consistent code quality
• Professional Workflow - Industry-standard tools from day one
• Best Practices - Linting, formatting, validation
• Tool Separation - Dev tools ≠ Runtime dependencies

The app still runs 100% in browser without any build step!

📖 Read more: LINTING.md

Type or paste your markdown content in the editor.

• Choose OS window style
• Select theme
• Adjust font size and padding
• Enable/disable Fira Code, Mermaid, KaTeX
• Add watermark

• Export PNG - Download high-quality image
• Copy Image - Copy to clipboard (paste in Paint, Photoshop, etc)
• Copy Text - Copy markdown source

const add = (a, b) => a + b;
if (x !== y && a >= b) {
  console.log("Beautiful!");
}

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Success]
    B -->|No| D[Retry]

Inline: $E = mc^2$

Block: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

• Alpine.js (15KB) - Reactive UI without build step
• Tailwind CSS (CDN) - Utility-first styling
• Marked.js - Markdown parsing
• DOMPurify - XSS protection

• Prism.js - Syntax highlighting
• Mermaid.js - Diagram rendering
• KaTeX - Math formula rendering
• html2canvas - PNG export
• Fira Code - Programming font with ligatures

• Buildless - No npm, no webpack, no vite
• Single HTML file - 52KB total
• CDN-based - All dependencies from CDN
• Progressive Enhancement - Works without JavaScript (basic markdown)

Range: 10-24px (default: 14px)

Range: 32-128px (default: 32px) Controls the space between window and desktop background.

• Custom text (default: @sandikodev)
• Size: 8-24px (default: 24px)
• Opacity: 10-100% (default: 30%)

Custom filename displayed in window title bar (default: README.md)

• ✅ Markdown support (not just code)
• ✅ Mermaid diagrams
• ✅ KaTeX math formulas
• ✅ Multiple OS simulations
• ✅ Offline capable (single HTML file)
• ✅ Open source

• ✅ Authentic OS window simulations
• ✅ Syntax highlighting
• ✅ Customizable themes
• ✅ High-quality export
• ✅ No watermark (unless you want one)

sandikodev.github.io/snapcode/
├── index.html          # Complete app (52KB)
└── README.md          # This file

That's it! Single HTML file with everything included.

Just edit index.html and refresh browser.

• Alpine.js - Reactive state management
• CSS-in-JS - Dynamic theme styling
• Template Literals - Dynamic CSS generation
• ES6+ - Modern JavaScript

// Alpine.js component
function app() {
  return {
    // Reactive state
    theme: 'dracula',
    fontSize: 14,
    
    // Computed properties
    get parsedMarkdown() { ... },
    get styles() { ... },
    
    // Methods
    exportImage() { ... },
    copyText() { ... }
  }
}

Contributions are welcome! This is an open-source project built for the community.

• 🎨 Features - New OS themes, color themes, export formats
• 🐛 Bug Fixes - Browser compatibility, rendering issues
• 📝 Documentation - Improve clarity, add examples, translations
• 💡 Ideas - Suggest features, share use cases

Since this is a single HTML file, contributing is easy:

1. Fork the repository
2. Edit index.html in your browser or editor
3. Test by opening in browser (no build needed!)
4. Submit a Pull Request

See CONTRIBUTING.md for detailed guidelines.

We follow a Code of Conduct to ensure a welcoming environment for all contributors.

MIT License - feel free to use for personal or commercial projects.

@sandikodev

• Website: sandikodev.github.io/snapcode
• Twitter: @sandikodev

• Alpine.js - Caleb Porzio
• Tailwind CSS - Adam Wathan
• Prism.js - Lea Verou
• Mermaid.js - Knut Sveidqvist
• KaTeX - Khan Academy
• Fira Code - Nikita Prokopov

• File Size: 52KB (single HTML file)
• Dependencies: 0 (all from CDN)
• Build Time: 0 seconds (buildless)
• Load Time: < 1 second
• Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)

• More OS themes (Ubuntu, Fedora)
• Custom color themes
• SVG export
• Share via URL
• Dark mode for UI
• Keyboard shortcuts
• More diagram types
• Animation support

• 📚 Documentation - Beautiful code examples
• 🎓 Education - Teaching materials with diagrams
• 📱 Social Media - Share code snippets
• 📝 Blog Posts - Code screenshots
• 🎨 Presentations - Professional slides
• 📖 Books - Technical illustrations

• First Load: < 1s (with CDN cache)
• Render Time: < 100ms
• Export Time: 1-2s (depending on content)
• Memory Usage: < 50MB
• Bundle Size: 52KB (uncompressed)

• ✅ No tracking
• ✅ No analytics
• ✅ No cookies
• ✅ No server-side processing
• ✅ Everything runs locally in your browser
• ✅ Your content never leaves your device

• 🐛 Bug Reports: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: hello@sandikodev.com
• 🐦 Twitter: @sandikodev

Made with ❤️ by @sandikodev

ngode-ngide kode ngadi-ngadi 🚀