A powerful, modular React-based annotation system for AI-powered image editing. This open-source project provides a complete toolkit for creating annotation interfaces similar to those found in professional image editing applications.

• Freehand Drawing - Smooth pen tool with adjustable thickness and colors
• Arrows - Perfect arrows with customizable styling
• Text Annotations - Rich text with font size and color controls
• Image Overlays - Add and manipulate overlay images
• Mask Painting - Advanced masking tools for AI-powered editing

• Undo/Redo System - Full history management with 50-step memory
• Layer Management - Organized annotation layers
• Export Options - Download annotated images
• Touch Support - Full mobile and tablet compatibility
• Keyboard Shortcuts - Efficient workflow controls
• Responsive Design - Works on all screen sizes

• Modular API System - Easy integration with any AI service
• Mask-based Generation - Advanced inpainting capabilities
• Prompt Support - Text-to-image generation
• Multiple Provider Support - OpenAI, Stability AI, Replicate, custom APIs

# Clone the repository
git clone https://github.com/yourusername/open-source-draw-to-edit-nano-banana.git
cd open-source-draw-to-edit-nano-banana

# Install dependencies
npm install

# Start development server
npm run dev

import React from "react";
import { AnnotationEditor } from "./components/AnnotationEditor";

function App() {
  return (
    <div className="h-screen">
      <AnnotationEditor
        onImageGenerated={(imageUrl) => console.log("Generated:", imageUrl)}
        onError={(error) => console.error("Error:", error)}
      />
    </div>
  );
}

This system is specifically designed to work with the Nano Banana API backend. Here's how to integrate:

import { createNanoBananaClient } from "./api";

// Create Nano Banana API client
const apiClient = createNanoBananaClient(
  "https://your-nano-banana-backend.com", // Your backend URL
  "your-firebase-id-token" // Firebase authentication token
);

Create a .env file with your configuration:

# Nano Banana API Configuration
REACT_APP_NANO_BANANA_API_URL=https://your-nano-banana-backend.com
REACT_APP_FIREBASE_ID_TOKEN=your-firebase-id-token-here

# Optional Configuration
REACT_APP_MAX_IMAGE_SIZE=2048
REACT_APP_GENERATION_TIMEOUT=300000
REACT_APP_MAX_HISTORY_SIZE=50
REACT_APP_POLLING_INTERVAL=10000

The Nano Banana API client uses these endpoints:

• Generation: POST /api/image-editing/v1/generate
• Status Polling: POST /api/image-editing/v1/result

The API client sends requests in this format:

{
  "data": {
    "prompt": "Your editing prompt",
    "inputImage": ["base64-encoded-image"],
    "numOfImages": 1,
    "model": "NANO BANANA",
    "maskStrokes": [
      {
        "x": 100,
        "y": 150,
        "size": 30
      }
    ],
    "maskMode": true
  }
}

The API returns responses in this format:

{
  "success": true,
  "requestId": "unique-request-id",
  "result": {
    "status": "COMPLETED",
    "output": "https://generated-image-url.com/image.png",
    "processingTime": 45.2
  }
}

src/
├── components/           # React components
│   ├── ui/              # Basic UI components
│   ├── Canvas/          # Canvas components
│   ├── Toolbar/         # Tool panels
│   ├── Modals/          # Modal dialogs
│   └── AnnotationEditor/ # Main editor
├── hooks/               # Custom React hooks
├── utils/               # Utility functions
├── types/               # TypeScript definitions
└── api/                 # API integration

Customize colors and styling through the config prop:

<AnnotationEditor
  config={{
    colors: {
      draw: "#000000",
      arrow: "#ef4444",
      text: "#1f2937",
      mask: "#3b82f6",
    },
    defaultSizes: {
      drawThickness: 3,
      arrowThickness: 3,
      fontSize: 16,
      brushSize: 30,
    },
    canvas: {
      maxWidth: 1200,
      maxHeight: 800,
      backgroundColor: "#ffffff",
    },
  }}
/>

• Node.js 18+
• npm or yarn

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview