Create stunning LinkedIn banners that show your personality
Overlay Studio is an open-source LinkedIn banner generator with a powerful drag-and-drop editor. Inspired by ogis.dev (check out the original project), this tool lets you create professional, eye-catching banners with custom backgrounds, overlays, and cosmetic elements.
- ️Drag-and-Drop Canvas Editor - Intuitive interface for positioning and resizing elements
- Asset Library - Pre-loaded backgrounds, animal overlays, and cosmetic accessories
- Custom Image Upload - Add your own images (recommended: 1584 × 396 px)
- Layer Management - Reorder, lock, and manage multiple layers with ease
- Smart Snapping - Auto-fit backgrounds to banner dimensions
- Aspect Ratio Lock - Maintain proportions while resizing
- Export Options - Download as PNG (lossless) or JPEG (smaller file size)
- Real-time Preview - See your changes instantly
- Responsive Design - Works on both desktop and mobile devices
- AI-Powered Image Blending - blend two images seamlessly, put a hat on a cat!
- Node.js 18.x or higher
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/Pepps233/OverlayStudio.git cd OverlayStudio -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables (Optional - for analytics)
Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
See SUPABASE_SETUP.md for detailed setup instructions.
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
- Choose a Background - Select from pre-loaded city backgrounds or upload your own
- Add Overlays - Choose from cute animals (cats, dogs, seals, sea lions)
- Add Cosmetics - Decorate with hats and accessories
- Customize - Drag, resize, rotate, and position elements
- Layer Management - Right-click elements to bring forward, send back, or lock aspect ratio
- Export - Download your banner as PNG or JPEG
- Backgrounds: City landscapes (NYC, Seattle, Chicago, Austin, Golden Gate Bridge)
- Overlays: Animal images (4 cats, 2 dogs, 1 sea lion, 1 seal)
- Cosmetics: 8 different hat styles
- Framework: Next.js 16.1 with App Router
- UI Library: React 19.2
- Language: TypeScript 5
- Styling: Tailwind CSS 4
- Fonts: Geist Sans, Geist Mono, Rancho (Google Fonts)
- Build Tool: Turbopack
- Backend: Supabase (optional - for analytics)
- Database: PostgreSQL (via Supabase)
OverlayStudio/
├── public/
│ ├── assets/
│ │ ├── background/ # City background images
│ │ ├── overlay/ # Animal overlay images
│ │ └── cosmetic/ # Hat and accessory images
│ └── logo.svg # Application logo
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with fonts
│ │ ├── page.tsx # Main page component
│ │ └── globals.css # Global styles
│ └── components/
│ ├── Header.tsx # Navigation header
│ ├── HeroSection.tsx # Landing hero section
│ ├── Showcase.tsx # Feature showcase
│ ├── ClientLayout.tsx # Client-side wrapper
│ └── canvas/
│ ├── CanvasEditor.tsx # Main canvas editor
│ ├── AssetLibrary.tsx # Asset selection panel
│ ├── PreviewPanel.tsx # Banner preview
│ └── Toolbar.tsx # Upload toolbar
└── package.json
We welcome contributions! Please see our CONTRIBUTING.md for details on how to get started.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by ogis.dev by twangodev
- Built with Next.js
- Styled with Tailwind CSS
Project Link: https://github.com/Pepps233/OverlayStudio
⭐ Star us on GitHub if you find this project useful!