I work as a frontend team lead on a marketing automation platform. Our pop-up editor—the tool where clients build their pop-ups, forms, and overlays—had a problem. The desktop preview was rendered inline, and the mobile preview was hidden behind a modal. You had to click back and forth to compare. No zoom, no pan, and no side-by-side view. For a visual editor in 2026, that felt broken.
The client wanted a Figma-like experience. An infinite canvas where desktop and mobile previews sit next to each other: pan with Space + drag, zoom with Ctrl+scroll, and an action bar at the bottom with zoom controls. The kind of thing you see in any modern design tool, like Figma or Miro.
The classic estimate for this is two to three weeks for a senior frontend developer. That includes research, architecture decisions, implementation, drag-and-drop integration, and testing.
I did it in one afternoon with AI. Here is what happened.
The Starting Point
The popup editor is a complex Angular 17+ application with standalone components, signals, CDK drag-and-drop for the elements panel, CDK portals, and NgComponentOutlet for dynamic rendering. The previews are not static images, but live Angular components with real forms, buttons, inputs, and event handlers.
This matters because most pan-zoom solutions on the market are built for canvas-pixel rendering (Pixi.js, Konva, Fabric.js) or have conflicts with Angular change detection (d3-zoom). In our case, you couldn’t just drop a library and call it done. The solution needs to host live, interactive Angular components inside the zoomable area and play nicely with CDK drag-and-drop.
Phase 1: Research (30 minutes)
I wrote a detailed research prompt. Not “find me a zoom library”—I described the current architecture, the target state from Figma designs, every keyboard shortcut, every integration constraint. I listed specific libraries to evaluate and specific questions to answer.
AI returned a comparison table of six approaches: pure CSS transforms, @panzoom/panzoom, d3-zoom, panzoom (anvaka), Pixi/Konva/Fabric, and several Angular-specific libraries. Each approach was evaluated against eight criteria: live Angular component support, bundle size, CDK drag-drop compatibility, maintenance status, and integration effort.
The recommendation? Pure CSS transforms, no library. Zero dependencies. A new CanvasViewportComponent that wraps the existing popup wrapper with transform: translate(X, Y) scale(Z) driven by Angular signals. Around 200-400 lines of code.
The reasoning was solid, too. Live Angular components work perfectly inside CSS-transformed containers. CDK drag-drop already has a built-in cdkDragScale input for scaled containers. No library API to fight against. Full control over the transform math.
I reviewed the architecture, agreed with the approach, and said, “Start implementing.”
Phase 2: Implementation (2-3 hours)
AI wrote the CanvasViewportComponent from scratch:
- Pan logic,
- Zoom logic,
- Keyboard shortcuts,
- Trackpad gesture support,
- The canvas surface with two PopupWrapperComponent instances (one at 1200px for desktop, the other at 375px for mobile), positioned side by side.
- The bottom action bar with device toggles and zoom controls, positioned outside the transform so it stays fixed.
- CDK drag-drop integration with cdkDragScale passed as a signal value.
While implementing, AI was validating against the Figma designs through Chrome MCP, a browser automation protocol that gives AI direct access to Chrome. It could open the app, interact with the canvas, compare the result to the design, and fix discrepancies without me telling it what to look for.
After roughly 3 hours of implementation and self-correction cycles, I had a working canvas viewport—pan, zoom, dual preview, drag-and-drop from the elements panel into both frames.—so, around 70-80% toward production quality.
Phase 3: Performance Audit (30 minutes)
This is where things got interesting. After the implementation was functional, I asked AI to run a performance audit using Chrome DevTools MCP. It opened the Performance panel, recorded interactions, and analyzed the results.
It identified too many change detection cycles! Every mouse move during pan-and-drag operations was triggering Angular change detection across the entire component tree. On a complex pop-up with 20+ elements, this caused visible frame drops.
AI proposed the fix on its own: wrap all drag-and-drop and pan/zoom event handling in this.ngZone.runOutsideAngular(). This runs the mouse and touch event listeners outside Angular’s zone, so change detection only triggers when we explicitly call ngZone.run() to update the UI state. The heavy mouse-tracking math runs without touching Angular at all.
This is not a beginner-level optimization. This is the kind of thing a senior Angular developer knows from experience with performance-critical UI. AI identified the problem from real profiling data, proposed the right solution, and explained the tradeoff.
The Result
Total time from start to working solution: roughly 4 hours.
What was delivered:
- CanvasViewportComponent with pan and zoom driven by Angular signals
- Dual preview rendering (desktop 1200px + mobile 375px) on infinite canvas
- Space + drag panning, Ctrl/Cmd + scroll zooming, keyboard shortcuts
- Bottom action bar with device toggles and zoom percentage
- CDK drag-and-drop integration with coordinate translation for scaled canvas
- Performance optimization with runOutsideAngular for all UI event handling
- Zero new dependencies added to the project
What would normally take 2-3 weeks was 70-80% done in one afternoon. The remaining 20-30% (edge cases, polish, cross-browser testing, accessibility) took a few more days of regular development work.
The client was very happy with the delivery speed.
What does this Actually Mean?
I want to be direct about what this case study proves and what it does not.
It proves that AI can take a well-defined architecture task and execute it at a speed that was not possible before. The research phase alone—evaluating six libraries against eight criteria, reading documentation, checking GitHub issues—would take a developer half a day. AI did it in 30 minutes with better coverage than most devs would achieve.
It proves that AI can go beyond code generation. When I pointed it at Chrome DevTools to audit performance, it not only found the problem but proposed a fix that required real Angular expertise, without me telling it what to look for.
However, this case study does not prove that you can remove developers from the process. I defined the architecture constraints, reviewed every decision, knew what “good” looks like for this codebase. Without that, AI would have picked a library, spent hours on CDK integration, and produced something that technically works but does not fit the architecture.
This is the same pattern I see across all AI-assisted development: The quality of the output matches the quality of the input.
A vague prompt like “add zoom to the editor” would produce a generic solution with a random library and no consideration for the existing architecture. A detailed prompt with current state, target state, constraints, and specific evaluation criteria produces an expert-level options paper and a solid implementation.
This is not about replacing developers. This is about making senior developers dramatically more productive. The bottleneck is no longer “can I write the code,” but “can I define the problem precisely enough?”
Why This Matters for Your Team
If you have complex Angular applications with features that typically take weeks to build, the AI-assisted workflow I described here can significantly shorten the timeline.
However, it requires two things.
First, someone who understands the codebase deeply enough to write precise prompts and review the output. AI is a force multiplier—it multiplies whatever expertise you feed it.
Second, the right tooling setup. Claude with Chrome MCP for browser automation and validation is not just code generation. It is an AI that can see what it built, test it, profile it, and fix performance issues on its own.
If you want to learn how to set this up for your Angular projects, or if you need help implementing complex features with AI-assisted workflows, that is exactly what I teach and consult on.
9 min
