GridComposer — Image Layout & Design Tool
A modern image layout and design tool with a drag-and-drop canvas editor. Built with Next.js 14 and Fabric.js, featuring alignment tools, text editing, layer management, and multi-format export.
Solo Developer
2 weeks
Reader-first case study
This case study focuses on problem framing, implementation choices, technical constraints, and outcome.
Solo Developer
2 weeks
Independent project
2025
Where parts of the system are internal or institutional, this case study focuses on engineering scope, workflow design, and technical decisions rather than trying to simulate missing public artifacts.
Project Overview
GridComposer is a browser-based image layout and design tool that provides an intuitive canvas editor for creating image compositions. Built as a modern alternative to heavyweight design tools, it focuses on fast image arrangement and export workflows.
Project Details
Technologies Used
- Next.js 14 (App Router)
- Fabric.js (Canvas manipulation)
- Tailwind CSS
- JavaScript (ES6+)
Key Features
- Drag-and-Drop Canvas: Upload and arrange images freely on a resizable canvas
- Alignment & Distribution Tools: Snap-to-grid, align left/right/center/top/bottom, distribute evenly
- Text Editor: Add and style text elements with font, size, and color controls
- Layer Management: Bring forward, send backward, lock/unlock layers
- Multi-Format Export: Export compositions as PNG or JPEG with quality controls
- Responsive Design: Works across desktop browsers with touch-friendly controls
Technical Highlights
- Fabric.js Integration: Custom wrapper around Fabric.js for declarative canvas manipulation with React state management
- Performance: Canvas rendering optimised for smooth drag interactions even with multiple high-resolution images
- Non-Destructive Editing: All transformations are non-destructive — original images preserved