CodeSnap 🎨

Turn code into art. A beautiful, precision-engineered tool for creating high-fidelity screenshots of your code.

✨ Features

• 🎨 Beautiful Code Screenshots - Create stunning, high-quality screenshots of your code
• 🌓 Dark & Light Themes - Switch between dark and light themes with a single click
• 🎯 Real-time Preview - See your code screenshot update in real-time as you type
• 🎛️ Customizable Styling - Adjust background colors, padding, and shadow intensity
• 📥 High-Resolution Export - Download your code screenshots as PNG files (2x pixel ratio)
• 💻 Syntax Highlighting - Automatic syntax highlighting for JavaScript and 100+ languages
• 📱 Responsive Design - Works beautifully on desktop and mobile devices

🚀 Quick Start

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

🎯 How to Use CodeSnap

1. Paste Your Code - Enter or paste your code into the left editor panel
2. Customize Appearance - Use the control panel to:
   • Choose a background color (3 options per theme)
   • Adjust padding (0-100px)
   • Set shadow intensity (3 levels)
3. Preview - See your styled code in the right preview panel
4. Export - Click the "EXPORT" button to download your code screenshot as a PNG

🎨 Theme Support

CodeSnap supports both dark and light themes. Toggle between themes using the sun/moon icon in the top-right corner. Your theme preference is automatically saved and persists across page reloads.

🎨 Customization Options

Background Colors

Dark Theme:

• #000000 - Pure black
• #1a1a2e - Dark blue
• #2d2d44 - Dark gray

Light Theme:

• #ffffff - Pure white
• #f5f5f5 - Light gray
• #e8e8e8 - Lighter gray

Padding

Adjust the padding around your code block from 0px to 100px using the slider.

Shadow

Control the shadow intensity with three levels:

• None - No shadow
• Light - Subtle shadow
• Heavy - Deep, dramatic shadow

📁 Project Structure

code_snapper/
├── app/
│   ├── globals.css          # Global styles and theme variables
│   ├── layout.tsx            # Root layout with ThemeProvider
│   └── page.tsx              # Main page component
├── components/
│   ├── Header.tsx            # Header with logo and theme toggle
│   ├── CodeEditor.tsx        # Code editor with syntax highlighting
│   ├── CodePreview.tsx      # Preview panel for code screenshots
│   ├── ControlPanel.tsx     # Customization controls
│   ├── Features.tsx         # Features section
│   └── Footer.tsx            # Footer component
├── contexts/
│   └── ThemeContext.tsx      # Theme management context
└── public/                   # Static assets

🛠️ Built With

• Next.js 16.1.6
• TypeScript
• Tailwind CSS 4.0
• react-syntax-highlighter
• html-to-image
• lucide-react

---

© 2026 CODESNAP STUDIO. BUILT FOR THE OBSESSED. 🚀