---
title: "Force Crop"
description: "Start editing with predefined crop presets to simplify content creation and maintain layout consistency."
url: "https://img.ly/demos/force-crop/web/"
type: "demo"
demoId: "force-crop"
starterkit: "starterkit-force-crop-editor"
platforms: ["Web"]
tags: ["customization","web"]
relatedDemos: ["https://img.ly/demos/layouts/web/","https://img.ly/demos/default-ui/web/","https://img.ly/demos/page-sizes/web/","https://img.ly/demos/single-page-mode/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/starterkits/force-crop-editor-fcrp01/"
webGithub: "https://github.com/imgly/starterkit-force-crop-editor-react-web"
webCodeSandbox: "https://stackblitz.com/github/imgly/starterkit-force-crop-editor-react-web"
---

> This is the markdown version of [Force Crop](https://img.ly/demos/force-crop/web/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

## Available platforms

**Web** — [Open the demo](https://img.ly/demos/force-crop/web/)
- [Documentation](https://img.ly/docs/cesdk/js/starterkits/force-crop-editor-fcrp01.md)
- [Source code on GitHub](https://github.com/imgly/starterkit-force-crop-editor-react-web)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/starterkit-force-crop-editor-react-web)

### **What is Force Crop**

Force Crop ensures that media is cropped to match a specific size or aspect ratio from the start, making it easy to create profile images, social posts, or brand assets that follow exact format rules.

### **Using presets**

Force Crop applies cropping presets based on the exact requirements of your use case:

- **Fixed size**: For example, a 300×300px profile picture or a 1080×1920px Instagram Story
- **Locked aspect ratios**: Such as 1:1 for Instagram posts, 16:9 for YouTube thumbnails, or 4:5 for Facebook and Instagram feeds

Presets can be limited to just one or offer a selection, ensuring users stay within bounds, but with room for choice if desired. When only one preset is allowed, the UI reflects this clearly, removing unnecessary options and controls.

Users can always move and scale content within the crop area to get the perfect framing.

### **Crop modes**

Force Crop can be triggered in three ways, depending on how you want users to interact with the editor:

- **Silent**: Apply the preset behind the scenes without showing Crop Mode immediately
- **If Needed**: Launch Crop Mode only when the uploaded media doesn’t match the required size or aspect ratio
- **Always**: Always begin in Crop Mode with a preset applied, ensuring the right framing from the start

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.