Generative Fill and Compositor

Two AI image editors inside ImagineArt: inpainting and outpainting that respond before the model does, and multi-layer composition on Konva.

Company
ImagineArtAI image and video creation platform with 100M+ users across web and mobile.
Role
Senior Frontend Engineer
Period
Feb 2026 – Sep 2026
Location
San Francisco, CA (remote)

Original reconstruction for this portfolio.

Overview

I built two AI image editors for ImagineArt. Generative Fill handles inpainting and outpainting. Compositor is a multi-layer editor built on Konva.

Both had to feel like creative software rather than a form that submits a prompt: direct manipulation first, generation in the background. Generative Fill edits a node in place while the rest of the workflow blurs; Compositor opens a full editor with layers, an artboard, and properties.

Context and problem

Generation takes time, and editing is a loop. If every brush stroke waits on a model round trip, people stop experimenting.

Layered composition brings its own expectations from desktop tools: alignment that snaps, blend modes that behave, and an undo history people can trust.

My role and ownership

What I built

  • Generative Fill: inpainting and outpainting with optimistic previews and mask reuse.
  • Compositor: multi-layer editing on Konva with smart guides, blend modes, and undo/redo.
  • AI text-layer extraction inside Compositor.

Challenges

  • Model latency inside an editing loop

    A fill request takes far longer than a brush stroke. The editor had to stay responsive while results were still on their way.

  • Masks people want to keep

    Iterating on one region means generating against the same mask more than once. Repainting it every time breaks the loop.

  • Desktop-grade layering in a browser

    Multiple layers, alignment, blending, and history all have to agree with each other on a canvas.

Design and architecture decisions

  • Optimistic previews

    The canvas reflects the requested edit immediately and reconciles when the generated result arrives.

  • Masks as reusable input

    A painted mask can be reused for the next generation instead of being redrawn.

  • Konva for the layer model

    Compositor uses Konva’s scene graph for layers, with smart guides, blend modes, and an undo/redo history on top.

Selected implementation details

Loading the interactive reconstruction…

  • Generative Fill

    Inpainting inside a mask, outpainting beyond the frame, optimistic previews, and mask reuse.

  • Compositor

    Konva layers with smart guides, blend modes, undo/redo, and AI text-layer extraction.

Outcomes

2AI image editors shipped
Generative Fill and Compositor, both built by me for ImagineArt.
100M+users on the ImagineArt platform
Platform scale, not a measure of either editor’s usage.

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.

Technologies

  • React
  • TypeScript
  • Konva
  • HTML Canvas