markfulton/NanoBananaEditor

Nano Banana Editor

Generate and edit images with every Nano Banana model, in one editor.

nanobananaeditor.dev · Self-hosting guide · Architecture · Changelog

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