Mockly 🎨

Mockly is an open-source tool that allows developers to create professional-looking screenshots and mockups with ease. With Mockly, you can pick, place, and zoom—done. It's designed for fast, stress-free mockups for developers who'd rather code than design.

✨ Features

1. Instant Mockups: Upload, tweak, done. It's like magic, but without the wand.
2. Multi-device Preview: Instantly see how your designs look on any screen size—because nobody has time for resizing.
   • Example: Select "Screen Size" dropdown menu to automatically generate views for mobile, tablet, and desktop versions.
3. Zoom & Place: Precisely position your screenshot, and zoom in or out like a pro—minus the struggle.
   • Example: Drag your cursor to specify the position and use the zoom slider in the "Design" tab as needed.
4. Text & Style: Add text, pick your style, and make it pop. Because plain screenshots are so last year.
   • Example: Enter your text under the "Text" tab. Adjust the font size, weight, color, and drag it with around to align it your mockup.
5. No Login Required: Start creating immediately without any sign-up process.
6. No Watermarks: Your designs, your brand—no unwanted additions.
7. Free to Use: Powerful features accessible to everyone at no cost.

🚀 Getting Started

Prerequisites

• Node.js (v14 or later): Check your current version by running node -v.
• npm or yarn: If you're using npm or Yarn, you can run npm -v or yarn -v.

Installation

1. Clone the repository:

   git clone https://github.com/suryanshsingh2001/mockly.git
   

2. Navigate to the project directory:

   cd mockly
   

3. Install dependencies:

   npm install
   # or
   yarn install
   

4. Start the development server:

   npm run dev
   # or
   yarn dev
   

5. Open http://localhost:3000 in your browser to see the application.

🖱️ Usage

1. Navigate to the editor page.
2. Upload your screenshot or choose from available templates.
3. Use the intuitive interface to adjust, zoom, and place your image.
4. Add text, choose fonts, and style as needed.
5. Preview your design on multiple device sizes.
6. Download your finished mockup.

🔮 Future Scope

We have exciting plans for the future of Mockly, and we welcome contributions in these areas:

1. Video Editor: We're planning to expand Mockly's capabilities to include a video editor that follows the same philosophy as our image editor—quick, intuitive, and designed for developers who want to create professional-looking video content without the complexity of traditional video editing software.

2. AI-Assisted Design: Implementing AI to suggest design improvements and automate repetitive tasks.

3. Template Marketplace: A platform for users to share and download custom templates.

4. Collaboration Features: Real-time collaboration tools for team projects.

5. Plugin System: Allowing developers to extend Mockly's functionality with custom plugins.

We encourage contributors to think creatively about these future directions and propose innovative solutions to help bring these ideas to life.

🎉 Hacktoberfest 2024

We're excited to participate in Hacktoberfest 2024! Here's how you can contribute:

📜 Ground Rules

1. Contributions must be meaningful and add value to the project.
2. Follow our code style and best practices.
3. Be respectful and collaborative in discussions.
4. Test your changes thoroughly before submitting a PR.

🛠️ How to Contribute

1. Fork the repository to your GitHub account.
2. Create a new branch for your feature or bug fix:

   git checkout -b feature/your-feature-name
   

   or

   git checkout -b fix/your-bug-fix-name
   

3. Make your changes, ensuring they align with the issue template if addressing a specific issue.
4. Commit your changes with a clear and descriptive commit message.
5. Push your branch to your forked repository:

   git push origin feature/your-feature-name
   

6. Open a Pull Request (PR) to our main branch.

🔄 Pull Request Process

1. Ensure your PR description clearly describes the problem and solution. Include the relevant issue number if applicable.
2. Include screenshots or GIFs in your PR if you've made UI changes.
3. Make sure your code is properly formatted and passes all tests.
4. Your PR will be reviewed by maintainers. Be open to feedback and make necessary changes.
5. Once approved, your PR will be merged into the main codebase.

📝 Issue Templates

When creating a new issue or PR, please use our provided templates:

• For bug reports: Bug Report Template
• For feature requests: Feature Request Template
• For pull requests: Pull Request Template

🐛 Existing Issues and Contributions

We encourage contributors to explore our existing issues and contribute to them. Here are some ways you can help:

1. Bug Fixes: Look for issues labeled bug and help us squash them!
2. Feature Implementation: Issues labeled enhancement are great opportunities to add new features to Mockly.
3. Documentation: Help us improve our docs by addressing issues labeled documentation.
4. UI/UX Improvements: If you have design skills, look for issues labeled ui or ux.
5. Performance Optimization: Help make Mockly faster by tackling issues labeled performance.

Don't see an issue that matches your interests? Feel free to create a new issue and discuss your ideas with the community!

We look forward to your contributions and hope you enjoy participating in Hacktoberfest with Mockly!

❓ Frequently Asked Questions (FAQs)

1. What is Mockly?

Mockly is an open-source tool designed to help developers create professional-looking screenshots and mockups quickly and easily. It’s perfect for developers who want to produce high-quality visuals without needing to dive into complex design tools.

2. Do I need to sign up to use Mockly?

No, Mockly does not require any login or account creation. You can start using the tool right away without the need for any sign-up process.

3. Is Mockly free to use?

Yes, Mockly is completely free to use, and there are no hidden fees or watermarks. You get access to all its powerful features without any cost.

4. Is my data secure when using Mockly?

Yes, it is. Mockly does not store any of your images, text, or designs. All processing is done in real-time, and nothing is saved on our servers.

5. What formats does Mockly support for screenshots?

You can upload images in common formats like PNG, JPEG, and SVG. These formats are widely supported and make it easy to incorporate your screenshots into the tool.

6. How can I customize background image?

You can customize the background image by uploading your own image or selecting from the available templates. You can also adjust the position, zoom, and text to create a unique mockup.

7. Can I preview my designs on multiple devices?

Yes! Mockly allows you to preview your designs on various screen sizes and devices. This feature ensures that your mockups will look great on any platform.

8. Does Mockly support multi-language text input?

Yes, Mockly supports multi-language text input. Just enter your preferred language in the text field, and Mockly will render it accordingly.

9. Are there any system requirements for Mockly?

To run Mockly locally, you'll need Node.js (v14 or later) installed on your machine. Mockly works best in modern web browsers like Chrome, Firefox, and Safari for its web version.

9. Can I collaborate with others on Mockly?

As of now, Mockly doesn't have real-time collaboration features, but they are part of the future roadmap! Stay tuned for updates.

10. Does Mockly have a plugin system?

Not yet, but we plan to introduce a plugin system in the future that will allow developers to extend the tool's functionality by creating and integrating custom plugins.

11. How do I contribute to the project?

Mockly is open-source and welcomes contributions! You can check out our contribution guidelines and participate in Hacktoberfest or submit features, bug fixes, and more throughout the year.

12. Where can I report bugs or suggest features?

You can report bugs or suggest features by creating an issue in the Mockly GitHub repository. Make sure to check if an issue already exists before creating a new one!

13. Can I use Mockly for commercial purposes?

Yes, Mockly is licensed under the MIT License, which allows you to use it freely for both personal and commercial purposes.

14. Will Mockly support video editing?

Yes, we are planning to add video editing capabilities in the future, so you can create stunning video content with the same ease as creating screenshots.

15. What if I need help with Mockly?

For any questions or help, feel free to reach out through our GitHub Discussions or contact us via our project website or GitHub repository.

👥 Contributing

We welcome contributions from the community! Please read our Contribution Guidelines for more details on our year-round contribution process.

🤝 Code of Conduct

We are committed to fostering an inclusive and welcoming community. Please read our Code of Conduct before participating.

📄 License

This project is licensed under the MIT License.

📞 Contact

• Project Maintainer: Suryansh
• Project Website: https://www.mockly.site

🙏 Acknowledgments

• Thanks to all contributors who have helped shape Mockly.
• Built with Next.js and shadcn/ui.
• Icons provided by Lucide.

---

Made with ❤️ by the Mockly community