📱 Premium Device Mockup Generator

Create stunning device mockups for your designs

Device Category

Select Device

Screen Orientation

Custom Resolution

×

Common Resolutions

Zoom Level 100%

Device Bezel Color

Browser Chrome

Show Device Frame

Saved Configurations

No saved configurations

🔌 API Integration

POST /api/mockup
{"device": "iphone13", "image": "base64"}

🔗 Design Tool Integration

📤

Drag & drop your screenshot here or click to upload

📱

Upload an image to preview

Resolution

375 × 812

Pixel Density (PPI)

326

Viewport Size

375 × 812

Aspect Ratio

9:19.5

📖 User Guide - Device Mockup Generator

🚀 Getting Started

Select a device category (iPhone, Android, iPad, Desktop)
Choose a specific device model from the grid
Upload your screenshot using the upload area
Your image will appear in the device mockup preview

📱 Device Selection

iPhone: All iPhone models from iPhone 8 to iPhone 15 Pro Max
Android: Popular Android devices from Samsung, Google, Pixel
iPad: iPad Pro, iPad Air, iPad Mini models
Desktop: Various monitor sizes and laptop mockups

🎛️ Customization Options

Screen Orientation: Toggle between portrait and landscape modes
Custom Resolution: Enter specific width and height values
Common Resolutions: Quick access to popular screen sizes
Zoom Level: Adjust preview zoom from 25% to 200%
Bezel Color: Customize device frame color
Browser Chrome: Add browser UI simulation
Device Frame: Show or hide the device bezel

🔍 Comparison Mode

Click "Compare Devices" to see your design on multiple devices
Great for responsive design testing
Compare across different screen sizes simultaneously

💾 Saving & Loading

Save Config: Save current device and settings as a preset
Access saved configurations from the panel
Quickly switch between different setups

📥 Download Options

Click "Download Mockup" to export the current view
High-quality PNG output
Perfect for presentations and portfolios

🔌 API Integration

Use the API code section for programmatic access
Integrate mockup generation into your workflow
Send POST requests with device and image data

🔗 Design Tool Integration

Figma: Copy plugin code for Figma integration
Sketch: Get Sketch plugin code
Adobe XD: Adobe XD integration code

💡 Tips

Use high-resolution screenshots for best quality
Try different orientations to test responsive layouts
Use comparison mode for thorough responsive testing
Save frequently used device configurations as presets
Customize bezel color to match your brand

📊 Information Display

Resolution: Current screen dimensions
PPI: Pixel density of the device
Viewport: Available content area
Aspect Ratio: Screen proportions