An Open-Source AI Infinite Canvas: Turning Every Image Generation into a Growing Creative Node
Discover NanoBanana Pro, an open-source infinite canvas workflow platform built with React 19 and Vite 6 that turns linear AI image generation into a branching, editable creative map.

An Open-Source AI Infinite Canvas: Turning Every Image Generation into a Growing Creative Node
Source: https://blog.csdn.net/xianyu120/article/details/163173904
An Open-Source AI Infinite Canvas: Turning Every Image Generation into a Growing Creative Node

Most AI image generation tools today still suffer from a glaring issue.
You enter a prompt and get a few images; if you aren't satisfied, you tweak the prompt; if you want a different style, you start another round. As generations multiply, your genuinely useful creative context gets scattered across a long, linear chat history.
Ultimately, you might remember an image turned out great, but it's hard to tell: which version it was iterated from, which reference image was used, or what intermediate directions were explored along the way.
That is precisely why I built NanoBanana Pro.
It is a high-fidelity AI image generation workflow platform built around an Infinite Canvas. The project source code is now open-source, built with React 19, TypeScript, and Vite 6 on the frontend, integrating Gemini and OpenAI image models.
Project Repository: https://github.com/xianyu110/nanobanamax-pro
Live Demo: https://pro.nanobanana-free.top/
It's Not Just Another Prompt Box
The core design of NanoBanana Pro isn't simply adding more AI models; it transforms AI image generation from a game of "gacha pulls" into a clear creative map that you can review, branch out from, and edit at any time.
Every generation becomes a distinct node on the canvas.
You can pan around the canvas, zoom in and out, and continue exploring from any generated result. Connecting lines between nodes preserve the parent-child relationships, while auto-layout keeps multiple outputs from cluttering together.
On the surface, it might look like simply placing images onto an infinite canvas.
What really changes, however, is that the creative process is no longer overwritten—it is preserved.
Suppose you're designing a product poster.
The first version has good composition, but the colors are off; the second version fixes the color, but the subject's pose isn't ideal; in the third version, you want to keep the subject and swap only the background.
In a traditional chat interface, these versions quickly turn into a jumbled mess. In NanoBanana Pro, you can branch directly from any node you like, letting different creative directions evolve independently, and then step back to compare them side by side.
It feels very much like bringing the node-based workflow concepts of Dify or ComfyUI into a far more intuitive visual creation workspace.
An Image Is Not an End Point, But the Starting Point for the Next Round
An infinite canvas is merely a container—what turns it into a real workflow are "branching" and "reference images."
When you see a satisfactory result, you can set it as a reference image and describe the next set of edits: swap the background, adjust the color palette, tweak the style, or explore multiple variations based on the same composition.
The repository also implements inpainting controls. That means the workflow doesn't just cover text-to-image generation; it handles image-to-image referencing, re-generation, and localized editing as well.
Instead of starting from scratch every time, you build continuously on your existing progress.
For designers, marketers, e-commerce teams, and content creators, this matters far more than simply "generating more images." In real-world work, the most time-consuming part isn't the first draft, but the dozens of subtle iterations that follow.
Built-in "AI Art Director": Think First, Generate Later
Many people get stuck with AI image tools not because they lack ideas, but because they don't know how to translate vague concepts into detailed prompts that models can better interpret.
NanoBanana Pro features a "Deep Thinking" mode.
When enabled, the AI first analyzes your prompt across composition, lighting, color, and style, then synthesizes an optimized English prompt. Users can expand the interface to inspect how the prompt was optimized, rather than simply receiving an opaque final result.
The value of this design is that it bakes prompt engineering right into the workflow.
You can still type a simple prompt like "cyberpunk rainy street at night," but the system enriches it into a complete visual description before passing it to the image model.
For beginners, it lowers the barrier to prompt writing; for advanced users, it provides an inspection layer that can be fine-tuned further.
Generate 1 to 4 Images at Once: Explore Directions in Parallel
Nothing kills creative momentum like waiting.
The repository currently supports generating 1 to 4 images at a time. Rather than stuffing multiple images inside a single node, it creates independent nodes for each output and dispatches parallel generation requests.
This approach offers three key benefits:
- Each image renders immediately upon completion without waiting for the entire batch to finish;
- A failed request won't impact other nodes;
- Every result can be independently downloaded, deleted, set as a reference image, or branched off into new iterations.
Of course, parallel generation doesn't mean free speedups. Generating 4 images still consumes 4 model calls and API quota accordingly. It optimizes waiting time and creative flow, not raw API costs.
Beyond Gemini: Support for OpenAI Image Models
NanoBanana Pro provides multi-model endpoints in its repository, including Gemini 3.1 Flash Image Preview, Gemini 3 Pro Image, Gemini 2.5 Flash Image, alongside GPT Image 2 and GPT Image 1.5.
Different models excel at different stages: fast models are great for exploring rough directions, high-quality models work best for final renders, and image-editing models excel at modifying existing results.
The key advantage isn't just having "more models," but that a single unified canvas and node hierarchy can host results from different models seamlessly.
When switching models later, your creative assets don't get fragmented.
Save, Back Up, and Share Workflows
Canvas nodes are saved locally in the browser and persist across page refreshes. The full node tree can also be exported as a JSON file and re-imported later for further editing.
This means you aren't just saving a collection of final images—you're preserving the relationships between images, the prompts, and the complete exploration path.
For individual creators, it serves as a restorable creative workspace; for teams, it provides a far clearer format for handing off design concepts.
Note, however, that the current open-source release focuses on local workflows. Real-time multi-user collaboration, cloud synchronization, and permission management are not available out of the box.
Includes User Management, Quotas, and Payment Mockups
Another unique aspect of this project is that the repository includes not just the canvas and generation features, but also user profile management, credit balances, order histories, and usage logs.
To facilitate testing the product flow, local mock users and simulated payments can be used when no backend is configured. If you plan to scale it into a production product, the repository includes Supabase schema definitions, Vercel API examples, and Stripe Checkout integration paths.
However, two things must be clearly distinguished:
Running a functional monetization UI locally does not mean production payments are automatically live.
A production environment still requires configuring Supabase Auth, server-side plans and order logic, Stripe Checkout, and webhooks—and routing image generation requests through a backend to handle credit deductions, failure refunds, and API key protection.
In particular, never expose OpenAI or Gemini API keys in a public frontend. For production deployment, you should prioritize using the server-side generation endpoints provided in the repository or routing through your own backend proxy.
How to Run Locally
Prerequisite: Node.js 18 or higher. You can clone and run the project directly:
git clone https://github.com/xianyu110/nanobanamax-pro.git
cd nanobanamax-pro
npm install
npm run dev
Once launched, configure the corresponding model API Keys, Base URLs, or server-side environment variables as outlined in the repository README to start generating.
For quick local testing, frontend configuration is sufficient. If you plan to deploy publicly, we strongly recommend handling API keys and credit deductions server-side right from the start rather than adding security boundaries after going live.
Who Is This Project For?
If you only occasionally generate an avatar, standard conversational AI tools are more than sufficient.
However, if you frequently iterate on composition, swap styles, create multiple variations around a theme, or need to preserve the full trajectory of your work, the value of an infinite canvas becomes immediately obvious.
It is particularly suitable for:
- Designers and content creators who need to make repeated revisions;
- E-commerce and marketing teams needing to explore visual directions at scale;
- Developers interested in researching infinite canvases, node-based UI interactions, and multi-model integrations;
- Entrepreneurs looking to build AI image products on top of an open-source frontend.
Final Thoughts
In the past, when evaluating AI image tools, our main focus was whether the model could draw better pictures.
As models become increasingly capable, the challenge shifts to: How do we manage growing volumes of generated outputs, preserve iteration histories, and allow a great result to keep evolving?
NanoBanana Pro aims to address this workflow problem.
It is not yet a fully finished commercial product—cloud collaboration, license details, and production deployment experiences still have room for refinement. The repository README lists the license as MIT, though a standalone LICENSE file is currently missing from the root directory. If you plan to use it for commercial secondary development, consider confirming licensing terms with the author or waiting for an official license file.
Even so, it offers a clear and compelling vision:
AI image generation shouldn't be a series of isolated prompts—it should be a creative map that you can revisit, branch from, and continuously expand.
Project Repository: https://github.com/xianyu110/nanobanamax-pro
Live Demo: https://pro.nanobanana-free.top/


