A modern web-based canvas editor for creating visual designs. Add images, text, and backgrounds to create stunning graphics that you can export in high quality.

Stage is a canvas editor that runs in your web browser. Think of it like a simple version of Photoshop or Canva - you can:

• Upload images and add them to your canvas
• Add text overlays with custom fonts and colors
• Change backgrounds (solid colors, gradients, or images)
• Resize, move, and rotate everything
• Export your designs as PNG or JPG files

npm install
npm run dev

Visit http://localhost:3000

1. Create .env.local with:

   • DATABASE_URL - PostgreSQL connection string
   • BETTER_AUTH_SECRET - Generate with: openssl rand -base64 32
   • NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME - Cloudinary cloud name (optional)
   • CLOUDINARY_API_KEY - Cloudinary API key (optional)
   • CLOUDINARY_API_SECRET - Cloudinary API secret (optional)
   • GOOGLE_CLIENT_ID - Google OAuth ID (optional)
   • GOOGLE_CLIENT_SECRET - Google OAuth secret (optional)

2. Run database migrations:

   npx prisma migrate dev

• Upload: Add images to your canvas
• Text: Add text overlays
• Background: Set solid colors, gradients, or images
• Transform: Drag to move, resize, or rotate
• Export: Download as PNG or JPG

• Next.js 16 - React framework
• React 19 - UI library
• Konva - Canvas rendering engine
• Tailwind CSS - Styling
• TypeScript - Type safety
• Cloudinary - Image optimization and CDN

stage/
├── app/              # Next.js pages and routes
├── components/       # React components
│   ├── canvas/      # Canvas editor components
│   ├── landing/     # Landing page sections
│   └── ui/          # Reusable UI components
├── hooks/           # Custom React hooks
├── lib/             # Utilities and constants
└── types/           # TypeScript type definitions

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server

• Canvas size: 1920 × 1080 pixels
• Max image size: 10MB
• Supported formats: JPEG, PNG, WebP

See LICENSE file for details.