Canvas — an IDE for image generation
A three-panel workspace where generations run side by side, research happens next to the prompt, and the price shows up before you hit Enter.
- Role
- Designed, built, and shipped solo.
- Timeline
- March to July 2026.
- Status
- Open-sourced: github.com/as2621-dev/Canvas
- Tech
- Next.js + TypeScript · Supabase (Postgres) · Trigger.dev job queue · multi-model routing (Gemini + fal.ai) · half-price batch lane · cost reservation & settlement.
Canvas is what an IDE looks like when it's built for image generation instead of code: your library on the left, generation workspaces in the middle, a research panel on the right, and the price of every run printed on the button before you press it.
Where the idea came from
I used to generate images with Higgsfield almost daily, then turn the good ones into video. The loop never changed: type a prompt, wait, switch to ChatGPT to fix the next prompt, switch back, run again. References in a downloads folder, drafts somewhere else, one generation at a time. The waiting was the whole experience.
Developers don't write code in a chat box. They get an IDE — files on the left, editors in the middle, docs on the right, one window. Generating images is work in exactly the same way. So why was I doing it through a prompt box and four tabs?
The whole product is one decision: treat image generation as work, not as chat.
One window, three panels
What's below is a live, clickable demo of the whole platform — three workspaces running side by side, the library's folders showing their images on the left, the research panel's modes on the right. Poke around. The generations in it are real outputs from the app's own database. Read it like an IDE:
- Left — the library. Every project and its images, in folders. The file explorer.
- Middle — workspaces. Each generates and reviews with its own model and settings. The editors.
- Right — the research panel. Web search, prompt help, and agentic image search. The docs pane.
Left: the library
Every project opens with the same three folders — the split source control already makes:
- Raw images — where generations land.
- Inspiration — references and things found elsewhere.
- Finalized — what you'd actually ship.
Every folder is a live drop target, so filing an image is one drag. My old system was a downloads folder sorted by date.
Middle: parallel workflows
The panel that exists because of all that waiting. Every workspace has its own model, settings, and queue — in the demo above:
- Workspace A — NBPro on the batch lane at 1K: broad, cheap exploration.
- Workspace B — NB2 at 2K: refining the keeper.
- Workspace C — Kling3 video at 720p: slow, so it's isolated where it blocks nothing.
When one lane is generating, you move to the next instead of watching. Each header keeps its own count and running cost (Workspace A — 0 imgs · 0¢), tabs are color-coded, and you can open as many workspaces as you need. Since each workspace picks its own model, parallel lanes double as model comparison: same prompt, two models, side by side. And for images that don't need to land right now, there's a batch-processing API — slower runs, at a 50% discount.
Right: research without leaving
The third panel exists to kill the second tab. Three modes:
- Search — the web, inside the panel.
- Ask — a model rewrites or expands your prompt.
- Plan — an agentic mode that goes and finds reference images for you.
Results drag straight into a prompt or into Inspiration. Before this, I was the integration layer: search in a browser, screenshot, paste into ChatGPT, carry it all back by hand.
The price is on the button
Every run shows its price before you start it — the button itself reads 7¢, and it updates as you change model, quality, or count. Credits that arrive after the decision are what make generation feel like gambling; real money on the button is the fix. It's honest about quality too: the batch lane is half price but capped at 1K, so the size picker for batch simply doesn't offer 4K. The cheap lane tells you what it costs you at the same moment it tells you the price.
How a generation actually runs
Generate posts to an API route that writes a job row; Trigger.dev runs the work; the client subscribes to the job and renders outputs as they land. One submission is one job with N child outputs — the client never tracks images in flight, because client-held state the server can't contradict is how you get spinners that never stop. Cost is reserved at start, settled at completion, and a sweeper reclaims reservations from jobs that die. Self-hosted, on your own Gemini and fal.ai keys, with markup set to zero.
Decisions
The layout is a handful of deliberate calls. The project tree lives on the left because that is where an IDE keeps its files, so the work you are keeping stays one glance away instead of buried in a feed. The research panel lives on the right so looking something up never means leaving the window where the prompt is. And cost shows up wherever a decision happens: every workspace header carries a running total and the average per image, and the Generate button prints the price of the run before you press it.
That combination is also why Canvas beats the alternatives for real work. Prompt box tools like Higgsfield and Midjourney make you wait in one queue and tell you what you spent afterwards, in credits. ComfyUI gives you real control, but you build the wiring before you get any of it. Canvas puts the files, the research, and the numbers in one window and lets the lanes run side by side. The existing shapes are built around the output. Canvas is built around the work.
What I learned
- Pick problems where model progress is a tailwind. My last startup monetized a capability gap, and a frontier release erased it — that story is its own case study. Canvas sits above the models, so every release makes it better.
- Start smaller than the vision. I opened this build with a huge requirement doc and got lost inside it. The way out became my five principles of building — question the requirement, delete, simplify, accelerate, and only then automate.