About the Project

Mockly is a developer-friendly tool designed to make creating screenshots and mockups incredibly easy. Whether you need a quick visual for your project or a polished mockup for presentations, Mockly lets you do it all without the complexity of design tools like Figma or Canva.

The goal? To give developers a simple, fast, and powerful way to create professional-looking screenshots without needing to dive into design-heavy workflows.

Inspiration

As a developer, I’ve often found myself frustrated with how much effort it takes to produce something as simple as a screenshot or mockup. Why spend 30 minutes in a design tool for something that should take 5?

That’s why I built Mockly—a lightweight, no-frills tool for developers who would rather focus on code than design. This is my first attempt at building something like this, and I’d love to iterate on it and make it even better with community input.

Features

1. Instant Mockups

Upload an image, customize it, and you're done in minutes. Mockly keeps it simple while still offering flexibility.

2. Advanced Design Controls

Customize your screenshots with intuitive design tools like:

• Zoom & Place: Easily position your screenshot and zoom in or out to highlight the details you want.
• Border Radius: Add rounded corners for a sleek, modern look.
• Shadows & Transparency: Play with shadow effects and transparency to give your designs depth and style.
• Backgrounds: Choose from solid colors, gradient backgrounds, or upload custom images to set the perfect scene for your screenshot.

3. Text Customization

Add and style text with ease using:

• Font Size & Color: Pick your font, adjust the size, and choose colors that match your brand or style.
• Text Placement: Move your text around and align it perfectly with your mockup.

4. Multi-Device Preview

Instantly see how your designs will look across different screen sizes, including:

• Mobile
• Tablet
• Desktop

5. Export

Once your design is ready, export it in high resolution, ready to be shared, used in presentations, or sent out for feedback.

Tech Stack

Mockly is built with modern tools to keep things fast and smooth:

• Next.js: The backbone of the app, handling server-side rendering and performance optimizations.
• HTML Canvas: At the core of the design features, HTML Canvas powers the manipulation of images, text, and other visual elements.
• Shadcn: For styling components and giving Mockly a polished, cohesive look.

What’s Next?

This is just the first step! I’m planning to make Mockly open-source soon, so anyone can contribute and help make it even better. Whether it's adding more customization options, improving the user interface, or introducing new features, I’d love to collaborate with the developer community.

Your feedback is invaluable—if you've got ideas for how to make Mockly better, drop a comment or reach out. Let’s make this tool the go-to for quick, no-hassle mockups.

Try it Out

Want to give it a try? Head over to the https://mockly.vercel.app/ and test it out on desktop for the best experience.

Thanks for reading, and I can’t wait to hear what you think! 🙌