This guide includes all the info to get started with the Mediamodifier Mockup API.
Our API allows you to turn regular Photoshop PSD mockups into online templates which you can programmatically edit via API calls.
Follow this tutorial for formatting your PSD files for API first.
After reading the article, you’ll know all the basics about our API, how it works, how to set it up on your website, and the best practices for speed and image optimization.
The Mediamodifier Mockup API enables the creation of mockups via code.
This can be used to automate mockup creation or create mockups in bulk, on your own website or through a web application.
In simple terms, with the API, you can
1) Choose a mockup or upload your own
2) Send your image to the mockup
3) Get back a final image with the mockup and your image combined
NB: You can use our collection of 5000 ready-made mockups or upload your own custom private mockups
We also provide a quality service of converting your images into compatible mockups or creating completely new mockups, product photos, or 3D renders.
Let’s clear this up first:
This is perfect for testing the API calls, renders, and testing your own Photoshop mockup file formatting and uploading.
The API premium plan starts at 299USD/month and includes 5000 render calls monthly (other endpoints are not charged). Additional renders above 5000 are charged 0.06USD per every additional call (no technical limits).
Also, the more renders you produce, the cheaper it gets:
250k renders – 0.05 / render
500k renders – 0.04 / render
750k renders – 0.03 / render
1M renders – 0.02 / render
1,5M renders and up – 0.01 / render
The first step is enabling the API on your Mediamodifier account at https://mediamodifier.com/profile/mockup-api
This will create an API key that must be included in every API call.
Using templates vs. uploading your own
The API endpoints
The mockup API includes four endpoints.
In this guide, we’ll only be focusing on the two most important API calls:
- getting the details about a single mockup (Get Single Mockup Call)
- and then using this information to render a mockup (Render Mockup Call)
TIP: Please see and test example code and responses for all 4 endpoints on the API Docs page
Note: The API requests must be sent in json format, and the returned image will be sent back as a URL.
Get single mockup
This endpoint is meant to get all the details from a single mockup.
It means that each layer inside a mockup has its unique layer ID.
This allows customizing each layer separately.
Let’s Try it: Use the unique mockup nr to make this request.
How to find the mockup NR?
For public Mediamodifier mockups it is the code found at the end of an URL:
For your own custom Uploaded mockups this number will be shown on your API dashboard:
TIP: with the premium API plan, you also have access to the entire Mediamodifier Mockup library, meaning you can download public mockups, make changes to them and upload them back as your own private mockup.
Make an API call with this NR, and it will return all the layer info and reveal the layer ID for each layer in that mockup.
So let’s go all Neo and see the source code of a mockup.
Making a Get Single Mockup request shows all the contents of a mockup like this:
Rendering a mockup
For rendering the final image, we now need to know the following:
- the Mockup NR
- the layer IDs for each layer we want to change
- the photos we want to insert into the placeholders
In the video below, you’ll see the most critical API elements:
- Uploading a custom PSD mockup;
- Using the Get Single Mockup to extract layer info (using Postman);
- How to insert these details into a Render Call – with your image;
- Turning off the background scene layer;
- Changing the color of a layer (color of the hoodie).
You can submit your input image as direct URL, and the API returns a direct link to the final image
Scalability & Speed
The Mockup API is built on Amazon AWS. It uses a load balancer with 12 instances, so that it can handle 12 simultaneous calls. Our biggest partners render over 100 000 images a month, so the system is built for automatic scaling and speed.
For optimizing your API calls for maximum speed, please read our blog article about how to send API requests.
Troubleshooting & Support
The API is configured to send automatic emails (to the registered email) if an unknown error occurs during an API render call.
Even AWS can’t guarantee 100% uptime, so we also depend on their systems.
For all API clients we have Priority support.
- Enable API: API Dashboard
- Test API calls and see code examples: API Docs
- Free mockups for testing
- PSD formatting guide (for custom uploads)
- Book a Demo call
The Important Questions
Does the API Crop or Stretch My Input Image?
By default, your input image is always stretched into the mockup placeholder.
For example, if you submit a square image, but the placeholder in the mockup is a wide rectangle, then it will be stretched to fit the entire area.
To avoid this, you would need to:
submit an image in roughly the same ratio (2000px square will perfectly be downsized into a 1000px square placeholder)
crop your image before sending it to render or via the API (below)
How to Crop My Input Image Using API
This is done by using the crop parameters during the Render call
1) The X and Y are the pixel coordinates where the crop area will begin (starting from the top left)
2) The WIDTH and HEIGHT define the large crop area, starting from that x and y point.
3) The cropped area is then stretched to fit the exact placeholder size which depends on the mockup used
So if x and y are both 0, and the width and height are always the same as the inserted image size,
then the uploaded image will always be stretched to fit the placeholder, no matter the size.
Make API renders faster
Most significant gains in speed come from optimizing content:
- smaller PSD files
- smaller input images
The optimal PSD and image size is around 1000px; however, it is possible to use any other size you need for your application.
Please follow the detailed blog article below for the best speed and performance tips.
Are the Search and Get Single endpoint charged?
No. Only the Render Call
How to secure the endpoint?
For securing the endpoint, it would be necessary to always make your API calls from the backend by using it as a proxy service to make the calls. Using it on the front-end will expose your key, and someone could potentially make API calls with your private key.
We hope this mockup API guide has been helpful!
- Marketing Tips How To Skyrocket Business Acquisitions with Digital Signage
- Design Tips How To Create The Best Landing Pages For High Conversions
- Design Tips A Proven Guide to App Technical Optimization for More Revenue
- Marketing Tips How to Make Sure Your Marketing Showcases Authentic Use Cases
- Mockups & Templates 16 Brand New Stunning T-Shirt Mockups With Male Models
- Marketing Tips How to Use Product Mockups in Your Marketing Strategy
- Mockups & Templates Real Estate Mockups & Templates: The Best in the Business
- Mockups & Templates 27 Brand New Button Mockups For Quick Previews
- Design Tips The Fundamentals of Incorporating Closed Captions in UX Design
- Marketing Tips 5 Proven Ways Online Mockups Help Emails Stand Out
- Design Tips The Best Guide To Successful Parental Control Design
- Marketing Tips 4 Helpful And Creative Offline Advertisingn Techniques That Stand Out
- Marketing Tips The Best 26 Video Editing Software for Marketers to Use in 2023
- Mockups & Templates Brand New Gift Tag Mockups For Innovative And Realistic Previews
- Mockups & Templates 13 Buyer Persona Templates That Will Make Your Life Easier
- Mockups & Templates How To Easily Create A Clothing Size Chart + 14 Templates
- Mockups & Templates New iPhone App Mockups: 8 Vibrant Digital Marketing Banners
- Marketing Tips Best LinkedIn Image and Video Size in 2023
- Mockups & Templates 13 New Rollup Mockup Templates Exclusive To Mediamodifier
- Mockups & Templates 11 New Fantastic Packaging Label Templates To Impress Your Customers
- Marketing Tips 10 Reasons To Pay For Professional Mockups
- Marketing Tips How to Sell Digital Downloads on Etsy – The Ultimate Guide
- Mockups & Templates Maximize Customer Loyalty with 12 Awesome Customizable Reward Card Templates
- Marketing Tips Introducing The Guest Post Guidelines For Mediamodifier Blog
- Mockups & Templates 10 New Logo Templates You Can Use For Your Print Company
- Design Tips The Best 7 Colors to Use for Your Social Media Posts in 2023
- Marketing Tips 4 Useful Tactics That Will Boost Your Website’s Conversion Rates
- Tutorials How to Request a Custom Mockup
- Marketing Tips The BEST Marketing Calendar 2023 + 12 FREE Post Templates
- Marketing Tips The Complete Guide To Image Licenses In Marketing
- Mockups & Templates 10 Awesome Christmas Mockup Templates For Last Minute Marketing
- Marketing Tips Video Ads 101: Do They Work, and How To Use Them?
- Mockups & Templates 16 Corporate Stationery Mockup Templates For Beautiful Previews
- Blog 5 of the Best Design and Mockups Affiliate Programs Compared
- Mockups & Templates 10 TV Mockup Templates For Quick Marketing Images
- Mockups & Templates Free Neon Backgrounds with Instant Download
- Mockups & Templates Must Try: 9 Volatile and Practical Collage Mockup Templates
- Marketing Tips What Is an Employer Branding Specialist, and Do You Need One?
- Design Tips Turn Boring Photos into Artwork with PNG Shadows (50 Free Overlays)
- Mockups & Templates 16 Incredibly Useful Print Mockup Templates For POD Businesses
- Design Tips 40 Free Organic SVG Backgrounds From Mediamodifier
- Blog Affiliate Marketing Trends to Keep an Eye on in 2023 | Affiliate Marketing 101
- Mockups & Templates The 9 Best 3D Browser Mockups for Previewing Your Website
- Mockups & Templates 10 Clothing Mockups With Models You Should Use For Your Online Business
- Mockups & Templates What Does Mockup Mean? – A Beginner’s Guide to Mockups
- Blog TikTok & The Music Industry: The Impact of Viral Content
- Blog 3 Tips to Improve the Quality of a Mockup
- Mockups & Templates 15 Greeting Card Mockups With Flowers
- Mockups & Templates 10 Most Popular Website Screen Browser Mockup Templates
- Marketing Tips 4 Failproof Ways To Make Money on TikTok
- Mockups & Templates 11 Beautiful Poster Mockups To Preview Your Designs and Artwork
- Blog Best Types of Affiliate Marketing Content | Affiliate Marketing 101
- Mockups & Templates 11 Business Card Mockups For Quick Professional Previews
- Design Tips Can AI Generate a Product Mockup? We Tested All the Tools to Find Out!
- Mockups & Templates Free Podium Backgrounds for a Stunning Product Showcase
- Blog Logo Design 101: 5 Reasons You Need a New One and How to Nail It
- Mockups & Templates iPhone 14 Mockup Templates With Colorful Backgrounds
- News New Feature: Edit Brightness/Contrast of a Mockup Layer
- Mockups & Templates 6 Loungewear Mockup Templates to Showcase Your Apparel Designs
- Tutorials How to Change the Instagram Story Default Background
- Mockups & Templates 21 Logo Mockup Templates Available in the Mediamodifier Generator
- Mockups & Templates 14 Professional Samsung Galaxy Fold Mockup Templates
- Design Tips How to Add Animated GIF to an Image
- Mockups & Templates 33 Beautiful Blanket Mockup Templates to Use Right Now
- Marketing Tips How to Present a Logo to a Client – 5 Useful Tips
- Blog Tips to Achieve Affiliate Marketing Success | Affiliate Marketing 101
- Mockups & Templates 5 Quiz Templates for Instagram Stories to Boost Your Engagement Fast
- Tutorials How to Use the Mediamodifier Mockup Generator for Free
- News Now Is The Best Time to Invest in Mediamodifier
- Blog How to Get Started with Affiliate Marketing | Affiliate Marketing 101
- News 6 Instagram Updates You Need to Know About – July 2022
- Blog What is Affiliate Marketing | Affiliate Marketing 101
- Mockups & Templates 5 FREE Social Media Templates to Celebrate Pride Month
- Marketing Tips The Marketing Budgets of Big Companies
- Tutorials How to Add a Screenshot to a Computer Screen Stock Photo
- Marketing Tips The Secret to Promoting Your Product with Models
- Design Tips How to Create an Infographic Online With Mediamodifier
- News You Can Now Download SVG Vector Illustration Sets From Mediamodifier
- NFT NFTs: The Good, the Bad, and the Ugly
- Blog 8 Tools to Help You Become More Organized, From a Very Unorganized Person
- Design Tips Need Some Font Inspiration? Try These 5 Fonts Available on Mediamodifier
- Marketing Tips 6 Websites That Will Make It Easier to Stay on Track When Working From Home
- Marketing Tips Make Your Work Easier With These 10 Productivity Tools
- Mockups & Templates How and Why to Use Client Testimonials + 5 Free Templates
- Tutorials How to Make an Online Invoice With Mediamodifier
- Marketing Tips Case Study: This User Creates Etsy Listings In Seconds With Mediamodifier
- Marketing Tips The Best POD Tools for a Successful Print-On-Demand Business
- Marketing Tips Case Study: Etsy Star Seller Increased Their Production Speed by 90% With Our Tool
- Design Tips Improve Design Skills With These 6 Projects
- NFT A Look Into the Future of NFT: What Will the Space Look Like in 10 Years?
- Mockups & Templates 10 Easter Instagram Post Templates That You Can Publish in Seconds
- News Spring Sale: Mediamodifier PRO Annual Plan Now 50% Off!
- Marketing Tips Use These Social Media Job Post Templates to Attract the Best Talent
- Marketing Tips 6 TED Talks That All Marketing Students Should Watch
- Marketing Tips 4 Elon Musk Marketing Tips You Could Apply Today
- Marketing Tips April Fools’ Day Marketing Ideas: 4 Brilliant Ideas [Updated 2023]
- Design Tips The Ultimate Design Cheat Sheet for Students
- News New Feature: Mediamodifier Team Accounts Plan
- Mockups & Templates How to Design a LinkedIn Banner for Your Profile
- Blog Introducing the New Mediamodifier Website
- Marketing Tips 5 Ways Mockups Are The Eco-Friendly Marketing Tools of the Future
- News New Feature: SVG Illustrations Inside the Mediamodifier Design Editor
- Marketing Tips 6 Tips to Get More Clients for Your Small Business
- Marketing Tips 5 of the Best Marketing TikTok Pages to Follow for Inspiration and Advice
- Mockups & Templates How to Preview Social Media Posts Without Publishing Them
- Marketing Tips 6 Tips for Taking Better Product Photos
- Design Tips 5 Celebrities You Didn’t Know Used to Be Designers
- Post Ideas 10 Post Ideas for Social Media in March 2023
- Design Tips 8 Design Tips for Making a Good Concept Even Better
- Marketing Tips 5 Common Misconceptions About Social Media Managers
- Marketing Tips Improve Your Content With These 7 Tools For Small Businesses
- Mockups & Templates How to Preview Product Packaging Online (Mockup Tool Tutorial)
- Design Tips 5 Principles of Psychology You Can Use to Improve A Design
- Marketing Tips 3 Smart Valentine’s Day Marketing Ideas To Promote Your Business
- News Why You Should Use This WordPress PoD Plugin for Your Store
- Mockups & Templates 20 Valentine’s Day Card Templates (That You Can Use Right Now)
- NFT 3 Reasons to Use an NFT Maker
- Marketing Tips Print on Demand: 6 Easy Steps to Start a Profitable Side Business
- Post Ideas 10 Post Ideas for Social Media in February 2023
- News This New Feature Makes It Even Easier To Use Our Mockup Editor
- Marketing Tips 5 Smart Ways to Spend Your Marketing Budget
- Marketing Tips Starting a Small Business? 5 Things You’re Forgetting to Do
- NFT How to Use the Mediamodifier NFT Maker
- Mockups & Templates Boost Your Engagement: 9 Instagram Story Ideas
- Design Tips The Best 5 Colors to Use for Your Social Media in 2022
- Marketing Tips Ultimate Social Media Size Guide [Updated July 2022]
- Showroom Bow Tie Design Preview on Online PSD Mockup Generator
- Showroom Design Review on Bow Tie and Shirt Logo Mockup Generator
- Showroom Geometric Design in Necktie with Rolled Up Necktie Mockup Generator
- Showroom Bow Tie Design Preview with PSD Online Mockup
- Showroom Design Preview on Bow Tie and Shirt Mockup Generator with Male Model
- Showroom Bow Tie Design on PSD Mockup Generator with White Background
- Showroom Greetings Card Design Preview on Latest iPhone 15 Pro Mockup Generator