Inspiration
The creative process is often fragmented. We jump between layers, menus, and sliders, slowly assembling an idea piece by piece. We were inspired by the tactile, immediate workflow of modular synthesizers and professional color grading panels, where artists can "play" their tools and discover unexpected results through hands-on experimentation. We asked ourselves: what if we could bring that same fluid, exploratory power to image composition directly within Adobe Express? The goal was to transform the static, multi-step process of blending images into a dynamic, real-time visual playground.
What it does
BlendGrid is a creative accelerator that reimagines image composition as an interactive, grid-based experience. It allows users to: Compose Visually: Arrange images in a dynamic grid where every cell is an interactive lab. Interact Directly: Use intuitive mouse movements inside each cell to control complex transformations like perspective warp, free distortion, and color effects in real-time. Discover Effects Instantly: Cycle through 16 live-previewed blend modes with a single key press, finding the perfect combination without ever leaving the canvas. Perform Complex Compositions in One Click: Utilize powerful, context-aware actions like "Compose All to Target," which intelligently blends every image in the grid into a single, rich composition, an operation that would normally take dozens of steps. Maintain a Creative Flow: Every action is non-destructive until confirmed and fully integrated into a robust Undo/Redo history, encouraging fearless experimentation.
How we built it
BlendGrid is a self-contained web application built entirely on standard, front-end technologies, ensuring maximum compatibility with the Adobe Express add-on environment. Core Logic: The application is architected in vanilla JavaScript (ES6), managing a centralized state object that tracks the grid layout, image data, and history stack. Image Manipulation Engine: The heart of the add-on is the HTML5 Canvas API. All real-time transformations (rotation, skewing, distortion) and pixel-level blending effects are rendered on-the-fly to a canvas, which is then converted to a dataURL for seamless previews and final output. This client-side approach guarantees high performance without server dependencies. User Interface: The UI is structured with semantic HTML5 and styled with modern CSS, using CSS Grid Layout for the main structure and dynamic sub-grids. The interface is designed to be contextual, revealing powerful tools directly on the image cells to minimize reliance on static side panels. File Handling (Prototype): For standalone prototyping, we used the JSZip library to manage the import/export of entire grid compositions. This modular I/O logic is designed to be easily swapped with the Adobe Express Add-on SDK for seamless integration with a user's cloud library and design documents.
Challenges we ran into
The primary challenge was balancing a feature-rich, interactive experience with high performance. Generating real-time previews for complex operations like the multi-image "Compose All to Target" required significant optimization. We initially faced flickering and UI lag, which we solved by implementing a debounced preview rendering engine and ensuring that the DOM was manipulated efficiently, only updating what was necessary. Another challenge was designing a powerful yet intuitive UI that didn't overwhelm the user. The evolution from a static 3x3 hotspot grid to the final context-aware 4x4 sub-grids was an iterative process of user-centric design, focused on creating a "discoverable" interface where advanced features feel like a natural extension of the creative flow.
Accomplishments that we're proud of
We are incredibly proud of creating an interface that feels less like software and more like an instrument. The ability to cycle through 16 blend modes with the spacebar while simultaneously controlling opacity and saturation with the mouse is a workflow we haven't seen elsewhere in this context. The "Compose All to Target" feature is a major accomplishment. It encapsulates a complex, professional-level compositing technique into a single, intuitive action, truly embodying our goal of accelerating the creative process. Finally, building this entire application with zero external framework dependencies showcases the power and maturity of modern browser APIs.
What we learned
This project reinforced the value of state management and immutability. Early versions had bugs related to state being mutated unexpectedly, especially within the history stack. Adopting a stricter, more centralized state management approach, where every change creates a new state, solved these issues and made the Undo/Redo system perfectly reliable. We also learned that for creative tools, the "feel" of the interaction is just as important as the features themselves. Fine-tuning the response of the dynamic controls (like free_distort) and the timing of UI transitions was critical to making the tool feel powerful and responsive, not clunky.
What's next for BlendGrid
The future of BlendGrid is focused on deeper integration and creative expansion. Our roadmap includes: Full Adobe Express SDK Integration: Replacing the current file I/O with direct access to the user's Adobe Express projects, libraries, and Adobe Stock. The primary call-to-action will become "Add to Design," seamlessly placing the final composition onto the user's canvas. Saving and Loading Presets: Allowing users to save entire grid layouts and image configurations as presets within their Adobe Express account for repeatable workflows. Advanced Masking and Layering: Introducing basic masking capabilities within each cell to allow for more nuanced and non-destructive blending. Animation and Video Support: Expanding beyond static images to allow users to compose short video clips or animated GIFs within the grid, opening up a new dimension of motion design possibilities.
Log in or sign up for Devpost to join the conversation.