Start editing with predefined crop presets to simplify content creation and maintain layout consistency. Built with CE.SDK by IMG.LY, runs entirely in the browser with no server dependencies.
git clone https://github.com/imgly/starterkit-force-crop-editor-react-web.git
cd starterkit-force-crop-editor-react-webnpm installCE.SDK requires engine assets (fonts, icons, UI elements) served from your public/ directory.
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zipnpm run devOpen http://localhost:5173 in your browser.
Load content into the editor using one of these methods:
// Load from an image URL
await cesdk.createFromImage('https://example.com/photo.jpg');
// Load from a template archive
await cesdk.load('https://example.com/template.zip');
// Create a blank canvas
await cesdk.createDesignScene();
// Load from a scene file
await cesdk.load('https://example.com/scene.json');See Open the Editor for all loading methods.
cesdk.ui.setTheme('dark'); // 'light' | 'dark' | 'system'See Theming for custom color schemes and styling.
cesdk.i18n.setTranslations({
de: { 'actions.export.image': 'Foto herunterladen' }
});
cesdk.i18n.setLocale('de');See Localization for supported languages and translation keys.
src/
├── app/ # Demo application
├── imgly/
│ ├── config/
│ │ ├── actions.ts # Export/import actions
│ │ ├── features.ts # Feature toggles
│ │ ├── i18n.ts # Translations
│ │ ├── plugin.ts # Main configuration plugin
│ │ ├── settings.ts # Engine settings
│ │ └── ui/
│ │ ├── canvas.ts # Canvas configuration
│ │ ├── components.ts # Custom component registration
│ │ ├── dock.ts # Dock layout configuration
│ │ ├── index.ts # Combines UI customization exports
│ │ ├── inspectorBar.ts # Inspector bar layout
│ │ ├── navigationBar.ts # Navigation bar layout
│ │ └── panel.ts # Panel configuration
│ └── index.ts # Editor initialization function
└── index.tsx # Application entry point
- Transform – Crop, rotate, resize, and flip images
- Filters – Color grading with LUT filters and adjustments
- Background Removal – AI-powered, runs entirely in browser
- Text Overlays – Typography with fonts and effects
- Asset Libraries – Stickers, shapes, and custom graphics
- Export – PNG, JPEG, PDF with quality controls
- Node.js v22+ with npm – Download
- Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
| Issue | Solution |
|---|---|
| Editor doesn't load | Verify assets are accessible at baseURL |
| Assets don't appear | Check public/assets/ directory exists |
| Watermark appears | Add your license key |
For complete integration guides and API reference, visit the Photo Editor Documentation.
The demo assets for this starter kit load from the IMG.LY CDN by default — nothing to configure. If you want to own them — edit them, meet compliance requirements, or remove the CDN dependency for production — eject them (the archive contains only this kit's files):
# Download this starter kit's demo assets
curl -O https://staticimgly.com/imgly/cesdk-web-examples-data/1.82.0/starterkit-force-crop-editor/demo-assets.zip
unzip demo-assets.zip -d demo-assets
rm demo-assets.zipUpload the extracted files to your own server or CDN, then point the app
at them via .env:
VITE_DEMO_ASSETS_BASE_URL=https://cdn.yourdomain.com/demo-assetsThe default URL is the DEMO_ASSETS_BASE_URL constant in src/app/sample-images.ts if you
prefer changing it in code.
The demo assets are intended for development and prototyping — replace
them with your own content or licensed stock assets before shipping to
production (see DEMO-ASSETS-NOTICE.txt in the download). This applies in
particular to media such as music tracks and stock imagery.
This project is licensed under the MIT License - see the LICENSE file for details.