View

Fabric.js Garment Editor

Mockup

Generator

Hardback Book

Creating mockups couldn’t be easier.

Fabric.js Garment Editor

You may also like...

Getting Started

How it works...

We’ve designed this tool to make customising garments as easy and intuitive as possible. With just a few clicks, you can upload your design, adjust colours, and export a high-resolution mock-up—all from within your browser on any device and without the need for third-party software.

1. Upload Your Design

Click the ‘Add Design’ button to upload your artwork (supports JPG, PNG, SVG).

Your design will automatically appear on the garment mock-up.

Adjust the position and size of your design using the mouse.

2. Change Garment Colour

Click on the ‘Colour‘ button to open the colour picker.

Select a new colour for the garment. The preview will update in real-time.

3. Delete a Design

To delete a design, click on it and then press the trash icon that appears.

Only the selected design will be removed.

4. Export Your Design

Once you’re happy with your mock-up, click the ‘HD Export’ button.

Your design will download as a high-resolution PNG file.

FAQ

Here are answers to some common questions to help you get the most out of our garment editor. Whether you’re curious about how your artwork is handled or want to know more about the available features, this section covers it all. 

No, your artwork is processed entirely within your browser. It is never uploaded to our server, meaning we do not store or access any of your designs.

Yes, you can upload multiple designs at once, and they will be added to the canvas. You can adjust or remove each design individually.

Yes, after uploading your design, click on it and use your mouse to resize or reposition it as needed.

To reset the canvas, simply refresh the page. Please note that this will delete all current designs, so be sure to export your work before resetting.

You can upload JPG, PNG, and SVG files.

Currently, your work is not saved automatically. Make sure to export your design if you need to save it, as closing the browser will clear your progress.

Our mockup tool is designed with simplicity and accessibility in mind, providing a streamlined interface that focuses on delivering high-quality mockups without unnecessary complexity. While we don’t currently offer freehand drawing features, we believe it’s best to use specialised tools to maximise the quality of your design work. Platforms like Procreate, renowned for their freehand drawing capabilities, offer an exceptional range of features to elevate your creative process. For those who prefer a browser-based option, Sketchpad is a powerful, feature-rich alternative that’s free to use. Once you’ve crafted your freehand designs, we recommend exporting your artwork as PNG files, which can then be uploaded to our mockup tool for final touches and editing.

Your subscription to the Mockup Generator grants you full access to all mockups in the online editor. As a member, you also get at least 20% off everything else on the store—no need to build a custom bundle to save. Other digital products, like fonts, vector packs, motion packs, 3D Blender models, and texture packs, are available separately for direct download, ready for you to explore and customise. Our resources are designed to elevate your work, so feel free to browse our collection and find fresh inspiration for your next project!

Essentials Bundle

15% OFF

When you bundle up with 3-5 items

Discount automatically applied at the checkout. Discounts can’t be combined with other discounts.