📸 CodeSnap Studio

An advanced, developer-focused web application to transform source code snippets into visually stunning, high-resolution graphics.

Live Demo • Key Features • Architecture • Getting Started

---

📖 Overview

CodeSnap is a feature-rich developer tool designed to bridge the gap between clean code and aesthetic presentation. Whether you are sharing snippets on social media, writing technical articles, or preparing conference slides, CodeSnap gives you pixel-perfect control over syntax themes, background gradients, typography, window frames, and focus zones.

---

✨ Key Features

💻 1. Syntax & Code Presentation

• Multi-Language Engine: Full syntax parsing for JavaScript, Python, HTML, CSS, JSX/React, and JSON.
• Curated Themes: VS Code Dark+, Dracula, One Dark, and easily extensible styling profiles.
• Smart Line Numbering: Toggle line numbers with custom starting index support.
• Custom Metadata Header: Add editable project title, subtitle, and author watermark.

🎯 2. Focus Mode

• Range & Multi-line Parsing: Highlight specific lines (e.g., 2, 5-8, 12) while elegantly dimming non-focused lines.
• Custom Focus Glow: Configurable highlight colors for walkthroughs and tutorials.

🪄 3. Pro Visuals & Card Effects

• Modern Window Controls: macOS-style colored dots, minimalist monochrome dots, or clean borderless mode.
• Neon Glow & Drop Shadows: Configurable multi-layer shadow intensity and neon atmospheric glow.
• Canvas Patterns: Subtle background grid overlays with dynamic opacity and spacing.
• Quick-Style Presets: 1-click curated templates (Cyberpunk, Clean Minimalist, Ocean Breeze).

⚡ 4. Productivity & Performance

• Drag & Drop Import: Upload native code files via FileReader API.
• Dual Export Channels: High-resolution PNG download (2x density) and direct Clipboard copy.
• Persistent State: Real-time synchronization via localStorage.

---

📊 Feature Comparison & Controls

Category	Controls & Options
Canvas & Frame	Padding, Linear/Radial Gradients, Solid Colors
Card Effects	Border Radius, Accent Borders, Neon Glow, Grid Patterns
Typography	Font Family, Font Size, Line Height
Output	PNG Export (2x), Clipboard Copy, State Reset

---

🛠️ System Architecture

codesnap-react/
├── public/              # Static assets
├── src/
│   ├── App.jsx          # Core logic & state orchestration
│   ├── App.css          # Glassmorphism UI & theme tokens
│   └── main.jsx         # Entry point
├── package.json         # Dependencies
└── vite.config.js       # Bundler config

Technical Highlights

• DOM-to-Image Pipeline: Implemented html-to-image for accurate CSS-to-Canvas conversion.
• State Management: Handled 20+ interconnected UI states with optimized React hooks.
• Range Parser: Intelligent line-range parser for custom code highlighting.
• Clipboard API: Async operations for instant paste-ready captures.

🚀 Live Demo

🔗 Deployed Application: (Will be updated after deployment)

---

💻 Getting Started

Prerequisites

• Node.js (Version 16.x or higher)
• npm or yarn

Installation & Setup

1. Clone the repository:

  git clone https://github.com/reyhanevaghar/CodeSnap.git
   cd CodeSnap/codesnap_react

2.Install project dependencies:

npm install

3.Start the local development server:

npm run dev

Open your browser and navigate to http://localhost:5173.

4.Build for production:

npm run build

🔮 Roadmap / Future Enhancements

• Add custom watermark logo uploading.
• Implement SVG vector export support.
• Add real-time live preview sharing via URL hash/parameters.
• Add support for custom user fonts via Google Fonts API.

👤 Author

• Reyhane Vaghar
• GitHub: @reyhanevaghar
• Focus: Computer Engineering | Frontend & Backend & Software Development

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.