Golder Ration Overlay

Inspiration

I’ve always been fascinated by how the golden ratio underpins so many iconic designs yet saw that applying it in a fast, visual way inside Express still requires manual overlays or external tools. I wanted to bake that into the canvas itself so anyone can check their composition as they work, without leaving Express or guessing proportions.

What it does

Golden Ratio Overlay injects a configurable golden‑ratio grid over your canvas, analyzes your current layout against classic ratio templates, and offers one‑click resizing to common formats (Instagram, web banners, posters). Future versions will leverage AI to suggest custom text‑and‑image layouts that respect those proportions automatically.

How we built it

Using Adobe’s UXP‑based add‑on framework, it’s pure JavaScript with the Adobe Express SDK to hook into canvas events. The overlay is an SVG layer that updates on resize. Ratio calculations live in a small utility module, and template definitions drive the resizing logic. All UI sits in a floating panel built with Express’s panel components.

Challenges we ran into

Synchronizing our SVG overlay with Express’s transform matrix was tricky canvas zooms and rotates break static grids. We solved it by listening to document change events and recalculating transforms in real time. Packaging the panel to load quickly without blocking the main thread also required splitting code into dynamic imports.

Accomplishments we’re proud of

A working prototype that instantly snaps to any ratio template and resizes artboards without lag. The live analysis mode now highlights regions of your design that diverge from golden‑ratio guides. We demonstrated it in the Code Playground with a sample layout in under five minutes.

What we learned

Deep dive into Express’s document model, event hooks, and the performance implications of layering SVG over a WebGL canvas. We also gained firsthand insight into balancing responsiveness with accuracy when recalculating geometric overlays on every user interaction.

What’s next for Golden Ratio Overlay

Integrate an AI module to auto‑generate layout suggestions text placement, image cropping, spacing all grounded in golden‑ratio principles. Then gather user feedback via a closed beta, iterate on UX, and prepare for full production deployment through the Adobe Marketplace.

Ask ChatGPT

Built With

• adobe
• javascript
• node.js