Nano Banana Editor is a React + TypeScript app for Google's Gemini image models. Write a prompt, drop in reference photos, paint a mask, ground the prompt in live search results, and render anything from a 512px draft to a 4K final. Every render lands in a local history you can branch from.
Get your own copy
Join the Vibe Coding is Life Skool community for the one-click Bolt.new install, project downloads, live build sessions and prompts.
Models
| Model | ID | Output sizes | Inputs | Search grounding | Thinking |
|---|
| Nano Banana 2 Lite | gemini-3.1-flash-lite-image | 1K | up to 14 | no | Fast / Deep |
| Nano Banana 2 | gemini-3.1-flash-image | 512, 1K, 2K, 4K | up to 10 | yes | Fast / Deep |
| Nano Banana Pro | gemini-3-pro-image | 1K, 2K, 4K | up to 6 | yes | always on |
Aspect ratios: 1:1, 3:2, 2:3, 4:3, 3:4, 5:4, 4:5, 16:9, 9:16, 21:9, plus 4:1, 1:4, 8:1 and 1:8 on the two Flash models.
Credits
One catalog, src/lib/models.ts, defines what each model can do and what it costs. The edge function keeps an identical copy so the client can never lie about a price.
| Model | 512 | 1K | 2K | 4K |
|---|
| Nano Banana 2 Lite | – | 1 | – | – |
| Nano Banana 2 | 1 | 1 | 2 | 3 |
| Nano Banana Pro | – | 3 | 3 | 5 |
New accounts start with 5 free credits, granted by a database trigger on signup. Search grounding adds 1 credit. Credits are reserved server-side before the model runs and refunded automatically if the render fails or comes back empty.
Bring your own key: paste a Gemini API key from AI Studio in Settings and requests bill your Google account directly. The key is stored only in your browser and sent per request over HTTPS.
Features
- Generate from text with reference images, aspect ratio, resolution and 1, 2 or 4 parallel variants
- Edit any image with a sentence. Follow-up edits carry the last turns as context
- Mask a region with a brush and eraser so the change stays local
- Search grounding for prompts that need real-world facts (weather, scores, products)
- Thinking control on the Flash models: fast for simple prompts, deep for layouts and text
- Compare slider for before and after, one-click 4K re-render with Nano Banana Pro
- History that survives refresh (IndexedDB), with per-item settings, model notes, grounding sources and request details
- Paste or drop images anywhere, copy results to the clipboard, download as PNG, JPG or WebP
- Light and dark themes, full keyboard control
Keyboard shortcuts
| Keys | Action |
|---|
⌘ / Ctrl + Enter | Generate or apply edit |
G E M | Generate, Edit, Mask mode |
[ ] | Brush smaller / larger |
X | Brush / eraser |
Z | Undo stroke |
C | Compare before / after |
D | Download |
H P | Toggle history / composer |
T | Toggle theme |
0 | Fit to screen |
Running it yourself
The short version is below. The full walkthrough, including Stripe, custom SMTP and troubleshooting, is in docs/self-hosting.md.
Prerequisites
- Node 18+
- A Supabase project
- A Gemini API key from Google AI Studio
- A Stripe account if you want to sell credits (optional)
1. Install
git clone https://github.com/markfulton/NanoBananaEditor.git
cd NanoBananaEditor
npm install
cp .env.example .env
Fill in VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY from your Supabase project settings.
2. Database
Apply the migrations in supabase/migrations in order (Supabase CLI: supabase db push, or paste them into the SQL editor). They create the credits table, the Stripe tables, the usage log and the server-only credit functions.
3. Edge functions
Set the secrets, then deploy:
supabase secrets set GEMINI_API_KEY=your-key
supabase secrets set STRIPE_SECRET_KEY=sk_... STRIPE_WEBHOOK_SECRET=whsec_...
supabase functions deploy nano-image
supabase functions deploy stripe-checkout
supabase functions deploy stripe-webhook --no-verify-jwt
generate-image and edit-image are legacy endpoints kept for older builds. New installs do not need them.
4. Run
npm run dev
Open http://localhost:5173. Sign up, confirm the email, and spend the 5 starter credits. After that, buy credits through Stripe or paste your own Gemini key in Settings.
Scripts
| Command | What it does |
|---|
npm run dev | Vite dev server |
npm run build | Production build to dist/ |
npm run typecheck | Strict TypeScript check |
npm run lint | ESLint |
npm run sync:models | Copy the model catalog into the edge function after editing it |
Architecture
The long version, with the request flow and the reasoning behind masks and multi-turn edits, is in docs/architecture.md.
src/
├── lib/models.ts Model catalog: capabilities, ratios, sizes, credit costs
├── lib/actions.ts Tiny action registry for shortcuts
├── store/useAppStore.ts Composer, canvas and history state (persisted to IndexedDB)
├── store/useThemeStore.ts Light / dark / system
├── store/useSettingsStore.ts Own API key, download format
├── hooks/useGenerate.ts Builds the request, runs variants, records history
├── hooks/useCredits.ts Balance query
├── services/imageApi.ts Client for the nano-image edge function
├── services/maskService.ts Turns brush strokes into a mask and a tinted preview
└── components/ Composer, Canvas, HistoryPanel, ModelPicker, modals, ui/
supabase/
├── functions/nano-image Auth, credit reservation, Gemini call, refund, usage log
├── functions/stripe-* Checkout and webhook
└── migrations/ Schema, RLS, credit functions
Stack: React 18, TypeScript, Tailwind, Zustand, TanStack Query, Konva, Radix, Vite. Supabase for auth, Postgres and edge functions. @google/genai runs only inside the edge function, so the house API key never reaches the browser.
Security notes
- The edge function requires a signed-in, email-confirmed user. The anon key alone cannot generate.
- Credits are deducted with a
SECURITY DEFINER function that only the service role can execute. Users can read their balance and nothing else.
- Every render is written to
usage_log with model, size, tokens and duration.
Contributing
Issues and pull requests are welcome. Keep components focused, keep TypeScript strict, and run npm run typecheck && npm run lint && npm run build before opening a PR. If you touch src/lib/models.ts, run npm run sync:models and commit both copies.
License
Copyright © 2026 Mark Fulton. Licensed under the GNU Affero General Public License v3.0. If you run a modified version as a network service you must publish your source under the same license.
Built by Mark Fulton · Reinventing.AI · Vibe Coding is Life
