Mokify

Transform your website and mobile screenshots into professional mockups with beautiful frames, shadows, and customizable backgrounds.

Mokify is a free, open-source web tool inspired by Carbon.now.sh, but designed specifically for creating stunning presentation-ready mockups from website and mobile app screenshots.

✨ Features

• 🖥️ Multi-Device Support - Create mockups for desktop, mobile, or both side-by-side
• 🎨 Theme Customization - Switch between light and dark themes with adaptive frames
• 💫 Professional Shadows - Multiple shadow styles to add depth and realism
• 🎯 Background Control - Customize colors and add rounded edges to your canvas
• 📏 Flexible Padding - Adjust vertical and horizontal spacing for perfect composition
• ⚡ High-Quality Export - Download mockups in original resolution
• 📱 Mobile Responsive - Works seamlessly on all devices
• 🆓 100% Free - No subscriptions, no watermarks, no limitations

🚀 Quick Start

1. Select Device Type - Choose Desktop, Mobile, or both
2. Upload Screenshots - Drag and drop your images
3. Customize Style - Adjust theme, shadows, background, and padding
4. Download - Export your professional mockup

🛠️ Built With

• HTML5 - Semantic markup
• CSS3 - Modern styling with Tailwind CSS
• Vanilla JavaScript - No heavy frameworks
• HTML2Canvas - High-quality image rendering

🎯 Why Mokify?

Most existing mockup tools either:

• ❌ Lack mobile device support
• ❌ Have limited customization options
• ❌ Require expensive subscriptions
• ❌ Add watermarks to free exports

Mokify solves all these problems by providing a completely free, feature-rich alternative that's as elegant and easy-to-use as Carbon.now.sh.

Installation

1. Clone the repository

   git clone https://github.com/yourusername/Mokify.git
   cd Mokify

2. Open in browser

   • Simply open index.html in your web browser
   • Or serve with any local server (VS Code Live Server, Python's http.server, etc.)

3. Start creating mockups!

🤝 Contributing

Contributions are welcome! Whether it's:

• 🐛 Bug reports - Found an issue? Let us know!
• 💡 Feature requests - Have an idea? Share it!
• 🔧 Code contributions - Submit a pull request
• 📖 Documentation - Help improve our docs

Development Setup

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

📋 Roadmap

• Image Background - Use an image as the background
• Custom Frames - Add more device frame options
• Brand Integration - Add logos and branding elements
• API Integration - Programmatic mockup generation
• Browser Extension - Browser extension for quick mockup

🐛 Known Issues

• Large images may take longer to process
• Mobile device's height higher than desktop
• Some browsers may have CORS restrictions when loading local files

📄 License

This project is licensed under the MIT License

---

Made with ❤️ by tasinone

⭐ Star this repo if you find it helpful!