Outpaint Frame
Expand an image beyond its borders: grow the canvas around it and place the image on it, then send the frame to FLUX Outpainting or FLUX.1 Expand.
In use
The Image Edit Studio's Expand tool: grow the canvas, or pick a shape in its settings, then Expand.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/outpaint-frame.jsonOutpaintFrame
Drag an edge or corner to grow the canvas, the image to move it. Focus an edge or the image and use the arrow keys; Shift steps further. Pair it with the Aspect Ratio Picker to lock the canvas to an output shape.
| Prop | Type | Default |
|---|---|---|
| src | stringThe image to expand. The frame is in its pixels. | — |
| alt | stringDescribe the image. | — |
| value / defaultValue | OutpaintFrameValue{ width, height, x, y, image }: the canvas, the image's top-left on it, and the image's size. Starts around the image once it loads. Controlled with onValueChange. | — |
| aspectRatio | AspectRatioLocks the canvas's shape; a new one reshapes the canvas around the image. "auto" or none is free. | — |
| toolbar | booleanFloating size, center and reset. Hide it to place OutpaintFrameToolbar yourself. | true |
Helpers
The frame is what FLUX Outpainting takes: outpaint({ ...frame, image }). For FLUX.1 Expand, send its margins: expand({ ...toExpand(frame), image }).
| Prop | Type | Default |
|---|---|---|
| toExpand | (frame) => { top, bottom, left, right }Pixels added on each side, for FLUX.1 Expand, each clamped to 0–2048. | — |
| fitFrame | (image: { width, height }, aspectRatio?) => OutpaintFrameValueThe smallest canvas at aspectRatio around the image, centered on it. | — |
| MAX_EXPAND | number2048: the most pixels the frame adds on one side, FLUX.1 Expand's limit. | — |
| useOutpaintFrame | () => { frame, setFrame, aspectRatio }For your own controls inside OutpaintFrame. | — |