Snippify 🎨 - Free Code Snippet Image Generator

Transform your code into stunning, shareable images with beautiful themes and gradients.

Snippify is a modern, free code snippet generator that helps developers create beautiful screenshot images of their code. Perfect for blogs, documentation, social media, and presentations. No watermarks, no sign-up required.

Live Demo

🚀 Visit Snippify - Start creating beautiful code snippets now!

✨ Key Features

• 22+ Professional Themes - VS Code, GitHub Dark, Nord, Dracula, and more
• 22+ Beautiful Gradients - Sunset, Ocean, Purple Haze, and custom combinations
• Multiple Language Support - JavaScript, Python, HTML, CSS, Java, Rust, Go, C++, TypeScript, and more
• Customizable Export - Adjust font size, padding, and background
• PNG Download - Export snippets in high-quality PNG format
• Real-time Preview - See changes instantly as you customize
• No Watermarks - Completely free with no branding or limitations
• No Sign-up Required - Start using immediately
• Dark & Light Modes - Automatic theme detection

Why Use Snippify?

• ✅ Free & No Limits - Create unlimited code snippet images
• ✅ Beautiful Output - Professional-looking code screenshots
• ✅ Easy Sharing - Perfect for blogs, tweets, and documentation
• ✅ SEO Friendly - Improve documentation with visual code samples
• ✅ Fast & Responsive - Optimized for all devices
• ✅ Open Source - Community-driven development

✨ Features

Features

• 22+ Professional Themes
• 22+ Beautiful Gradients
• Multiple Languages Support (JavaScript, Python, HTML, CSS, Java, Rust, Go, C++, TypeScript)
• Customizable Font Size & Padding
• Export as PNG
• Toggle Background On/Off
• Real-time Preview

Tech Stack

• **Next.js 14 - Frontend framework
• Tailwind CSS 4 - Styling
• React Syntax Highlighter - Code highlighting
• Shadcn Ui - Components

Installation

Prerequisites

• Node.js 18+
• npm or yarn

Steps

1. Clone the repository

git clone https://github.com/hiarun02/snippify.git
cd snippify

2. Install dependencies

npm install

3. Run the development server

npm run dev

4. Open in browser Navigate to http://localhost:3000

Usage

1. Select Options

   • Choose gradient, theme, language, and font size from the header
   • Toggle background on/off
   • Adjust line numbers visibility

2. Paste Your Code

   • Paste code in the textarea
   • See real-time preview with syntax highlighting

3. Customize

   • Experiment with different themes and gradients
   • Adjust font size and padding
   • Toggle line numbers as needed

4. Export

   • Click "Download" to export as PNG
   • Share your beautifully formatted code!

Supported Languages

• JavaScript
• Python
• HTML
• CSS
• Java
• Rust
• Go
• C++
• TypeScript

🎨 Available Themes

• ColdarkDark
• OneDark
• Nord
• Synthwave84
• OkaiDia
• Gruvbox Dark
• Material Dark
• Twilight
• And 14+ more!

🌈 Gradient Options

22+ carefully curated gradients including:

• Sunset gradients
• Ocean vibes
• Purple haze
• Digital dreams
• And more!

📦 Build for Production

npm run build
npm start

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the Apache License 2.0 - see the LICENSE file for details.

👥 Contributors

Thanks to all our amazing contributors! Check out the Contributors page for more details.

👨‍💻 Creator

Arun Kumar (@hiarun02)

📞 Support

If you encounter any issues or have suggestions, please:

• Open an issue on GitHub
• Star the repository if you find it useful
• Share your feedback on Twitter @hiarun02

---

Made with 🖤 by Arun Kumar

Star ⭐ this repository if you find it helpful!