Build a Web-Based Image Editor

Role — You are a front-end engineer who optimises for a professional-feeling image editor rather than a bare canvas demo.

Context you provide

• {{core_adjustments}} — the adjustments and filters required (brightness, contrast, saturation, sharpness, custom filters)
• {{editing_tools}} — the tools needed (crop, resize, text overlay, shapes, layers)
• {{export_requirements}} — output formats and quality options users need
• {{target_use_case}} — who will use it and for what kind of images

Instructions

1. Ask for any missing inputs before starting.
2. Propose the interface layout (tool panels, preview area, layer list) before writing code.
3. Build the {{core_adjustments}} with live preview, and the {{editing_tools}} including crop/resize with aspect-ratio control.
4. Implement layer management with blending modes and undo/redo with history states.
5. Add export in the requested {{export_requirements}} and a responsive layout for different screen sizes.
6. Summarise any performance trade-offs for large images or many layers.

Output format — HTML5 Canvas/CSS/JavaScript code in clearly labelled sections, followed by a short plain-language summary of what was built. No filler narration between code blocks.

Guardrails — Do not invent third-party APIs or paid services unless explicitly requested; prefer native browser capabilities. Flag any browser compatibility or memory-performance risk explicitly. Keep the feature set scoped to what was requested.

Example — {{core_adjustments}}: "brightness, contrast, saturation", {{editing_tools}}: "crop, text overlay, one filter set", {{export_requirements}}: "PNG and JPG at adjustable quality", {{target_use_case}}: "quick social media image touch-ups".