English | 简体中文
Banana Canvas is an infinite canvas app for AI image creation and visual organization. It gives you a zoomable, draggable workspace where you can arrange images, notes, text labels, arrows, hand-drawn sketches, and embedded web pages in one place.
The app includes image generation and editing workflows. You can generate new images from text, or select existing images and annotations on the canvas so the model can continue editing based on that visual context. Generated results appear in the history panel and can be added back to the canvas for further iteration.
• Infinite canvas: pan, zoom, multi-select, drag, rotate, and resize elements. • WorkFlow: output results automatically serve as inputs for subsequent generations or processing stages.
- Rich canvas elements: notes, images, arrows, labels, drawings, and iframe embeds.
- AI image generation: text-to-image, reference-image editing, and annotated edit instructions.
- Model and API options: Banana / Banana Pro, custom Gemini API keys, and OpenAI-compatible endpoints.
- Generation history: review generation tasks, manage results, and add selected images back to the canvas.
- Creative workflow tools: image upload, drag-and-drop import, undo/redo, trash recovery, and single-image download.
- Planning AI image workflows and comparing generated results
- Building visual reference boards, moodboards, and creative drafts
- Annotating images with circles, arrows, labels, and edit instructions
- Managing generated images, reference materials, and prompt notes in one workspace
- React
- TypeScript
- Vite
- Gemini / Google GenAI SDK
- Tailwind CSS CDN
This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/ad0efd5a-2437-443d-970c-9ca50a8b03d5
Prerequisites: Node.js
- Install dependencies:
npm install - Set the
GEMINI_API_KEYin .env.local to your Gemini API key - Run the app:
npm run dev