ImagineArt Workflows: App Builder

ImagineArt Workflows lets creators chain AI image and video models on a node-based canvas. I architected and launched App Builder, which turns those workflows into publishable, monetizable apps with in-editor test runs and a guided publish flow.

Around it, I worked across the canvas itself: zoom-aware media loading, group connections that wire a whole selection in one drag, shared node components adopted across dozens of node types, and nodes such as Creative Analyzer, Ad Maker, Storyboard, and the Combine Audio & Video timeline.

A workflow graph makes sense to the person who built it. An app has to make sense to everyone else. To publish one, the system needs to know which nodes are the app’s inputs, which are its results, and which are internal steps the end user should never see.

Creators can select any part of a canvas, so that answer can’t be configured by hand for every selection. It has to come from the structure of the graph itself.

• Deriving a contract from an arbitrary selection

  A selection can be a whole workflow or a fragment of one. The app’s inputs and outputs had to be inferred from how the selected nodes depend on each other, not from manual configuration.

• Keeping a media-heavy canvas responsive

  Workflow nodes show generated images and video at every zoom level. Loading full-resolution media everywhere makes panning and zooming expensive, and re-rendering media on every frame makes it worse.

• Consistency across dozens of node types

  Toolbars, resizing, and result browsing rebuilt per node type drift apart in behavior and cost. They needed to be shared without becoming rigid.

• Plan from the graph, not from settings

  The planner walks dependencies and reachability inside the selection to find where data enters and where final results leave. The creator selects; the system works out the contract.

• Show the plan before building it

  Hovering Build App paints the plan onto the canvas: inputs glow violet, outputs amber, everything else dims. The hover and the click share one planner, so what is shown is exactly what gets built.

• Load only the pixels the zoom level needs

  Image, video, and import nodes pick one of 6 resolution variations by zoom bucket. A node re-renders only when zoom crosses a bucket, never per frame, so panning leaves media alone, and node renders memoize on data identity.

• Configure shared components per node type

  The action toolbar is driven by configuration, so each node type declares its actions instead of shipping its own toolbar.

~20%faster canvas rendering

From zoom-aware image and video loading and identity-based memoization.

120 fpspan and zoom on an image- and video-heavy workflow

Measured on the live canvas on a 120 Hz display: median frame 8.3 ms, p95 9.3 ms once media is cached. A team result that includes my rendering work.

2,152commits to the ImagineArt web app

Every commit across all branches, Feb to Sep 2026. The most of 33 contributors.

100M+users on the ImagineArt platform

The scale of the product I shipped into, not users I acquired.

Figures come from my resume or from measuring the shipped product. Where a number describes the product or the team rather than my work, the context says so.

• React
• TypeScript
• React Flow
• Zustand
• TanStack Query
• WebSockets
• Graph algorithms
• Rendering performance

• ImagineArtGenerative Fill and CompositorTwo AI image editors inside ImagineArt: inpainting and outpainting that respond before the model does, and multi-layer composition on Konva.
• iGOT.aiiGOT.ai: AI agents and workflow platformThe graph engine behind a no-code AI agent builder, then leading the team that built five AI and Web3 products on top of it.