Render Compositor

Use AI to improve your renders without letting it redraw them.

Render Compositor is a free, open source, in-browser tool for architectural renderings. Stack AI-edited versions over your original render, align them automatically, and mask in only the parts that actually got better. It runs entirely in your browser: nothing to install, no account, no uploads.

Open the app → · Website

Why

Image models regenerate the whole picture. Ask one to fix the street and it may also shift the windows, soften the edges or change the materials. Render Compositor treats each AI output as a source of good patches rather than a replacement: your original render stays the ground truth, and you choose, pixel by pixel, where the AI version shows through.

Features

• Auto-align. Edge-based search over position and scale, counting only the area you've revealed. For stubborn cases, align by clicking matching points, with optional scale and rotation.
• Alignment checks. Difference view (black means aligned), a split view, hold-to-flicker, and a red overlay that shows the hidden areas of the selected layer.
• Masks. Reveal and hide brushes with size, hardness and flow; lasso, polygon, rectangle and gradient masks; feather, invert, copy from the layer below, and export as PNG.
• Paint layers. Recolor, Relight, Shade, Glaze and Paint-over presets for color fixes that keep the light and texture underneath, plus an eyedropper that samples 1 px, 5×5 or 15×15 areas.
• Clone brush. Paint out AI artifacts by copying from the layers below.
• ChatGPT round-trip. Box an area, export the crop with a context image and a ready-made prompt, then place the generated result back in exactly the same spot as a feathered, auto-aligned layer.
• Layers. Per-layer opacity and a full set of blend modes.
• Export and projects. Full-resolution PNG or JPEG export, undo and redo, autosave in the browser, and projects saved as a single JSON file.
• Agent access (experimental). Let an AI agent drive the app through WebMCP: 26 actions covering layers, alignment, masks, regions and export, with per-action permissions and a log of every call.

Quick start

Hosted: open renderviewer.com/compositor.html in a desktop browser and drop in your images.

Locally: the app is a single HTML file with no build step and no dependencies. Clone the repo and serve the folder over HTTP:

git clone https://github.com/bwb-tools/render-viewer.git
cd render-viewer
python3 -m http.server 8765
# then open http://localhost:8765/compositor.html

On macOS you can double-click serve.command instead. Opening the file directly also loads, but browsers block pixel access to local files, so export and auto-align only work when the folder is served over HTTP.

How to use it

1. Stack. Add your original render first; the bottom layer sets the canvas size. Then add one or more AI-edited versions. Each new layer is fitted to the canvas width and starts fully visible.
2. Align. Select an AI layer and click Auto-align to layers below. Press D to check the fit: black means aligned. If auto-align struggles, press A and click the same feature on both layers.
3. Mask. Hide the parts that got worse with the hide brush (E, or hold ⌥ while using the brush). Or click Hide all and reveal only what improved with the brush (B). Lasso, polygon, rectangle and gradient masks (L, P, R, G) work too, and M tints the hidden areas red.
4. Finish. Add a paint layer for color fixes or clone work, then export with ⌘E.

Tip: rough out a mask over the area that matters before auto-aligning. Alignment only considers the revealed pixels, so the street can lock in even when the sky doesn't match.

ChatGPT round-trip

Fixing a small area often works better than regenerating the whole render.

1. Press W and drag a box around the area to rework. The box snaps to the 1:1, 3:2 and 2:3 shapes image models return.
2. Describe the change in the Change field and click Export crop + prompt. You get the crop, an optional context image with the area outlined, and a prompt that says what to change and what to leave alone. The prompt is also copied to your clipboard.
3. Upload the images with the prompt to ChatGPT, or any image model that takes an image and instructions.
4. Click Place result… and choose the generated image. It lands back in the box as a feathered, auto-aligned layer that you can mask like any other.

Agent access (experimental)

Press ` or click Agent in the toolbar to open the panel. It shows whether an agent can connect, explains how to connect one (natively in Chrome behind a flag, or from Claude Code or Claude Desktop through a WebMCP-to-MCP bridge), lets you allow all, read-only or no actions, and logs every call an agent makes.

Keyboard shortcuts

Key	Action	Key	Action
V	Move, scale, rotate	D	Difference view
H / hold Space	Pan	\	Split view
B / E	Reveal / hide brush	hold X	Flicker the selected layer
L P R	Lasso, polygon, rectangle	M / ⇧M	Mask overlay / ignore masks
G	Gradient mask	0 / 1	Fit / 100% zoom
I / C	Eyedropper / clone	[ ]	Brush size (⇧ for hardness)
W	Region for ChatGPT	⌘Z / ⇧⌘Z	Undo / redo
A	Align by points	⌘S / ⌘E	Save project / export PNG
Arrows	Nudge 1 px (⇧ 10 px)	⌘I	Invert mask
`	Agent access panel

Use Ctrl in place of ⌘ on Windows and Linux. Hover any button in the app to see its shortcut.

Privacy

Your images never leave your computer. All processing happens in the browser with the Canvas API, and the only network requests are for the page itself and optional files served next to it. Your session autosaves to your browser's local storage (IndexedDB); Clear autosave in the Project panel removes it.

Customizing

• Startup images. List images in DEFAULTS near the end of compositor.html to open them automatically, base render first. The second image is auto-aligned to the first.
• Material guide. If references/Architectural_Material_Reference_Guide.md exists next to the page, it can be appended to region prompts using the checkbox in the ChatGPT round-trip options. The references/ folder is gitignored, so project files kept there stay out of the repo.

Repository layout

Path	What it is
compositor.html	The app. HTML, CSS and JavaScript all live in this one file.
index.html	The landing page at renderviewer.com.
serve.command	macOS double-click launcher for a local server.
og-image.jpg, apple-touch-icon.png, favicon.ico	Link-preview image and icons.
scripts/check.mjs	Site checks: scripts parse, local files exist, nothing loads from other sites.
.github/workflows/pages.yml	Runs the checks on every push and pull request, and deploys main to GitHub Pages.
.github/	Also holds the issue forms, pull request template and Dependabot config.

Contributing

Bug reports, ideas and pull requests are welcome. See CONTRIBUTING.md for how the project is built and how to test a change, and please follow the Code of Conduct. Report security problems privately, as described in SECURITY.md.

License

MIT © 2026 David Brody