Flux Marketing Banner Generator app isfor creating professional marketing banners with ease. Built with Next.js 15, TypeScript, Tailwind CSS, and shadcn/ui.
- 🎨 Live Preview - See your banner update in real-time as you edit
- 📝 Simple Text Editing - Edit headline and description text with clean form inputs
- 🖼️ Background Selection - Choose from 5 preset background images
- 💾 Export Options - Download as PNG or WebP format
- 📏 Fixed Dimensions - Exports at 1200×650px (perfect for social media banners)
- 🎯 No Design Skills Required - Simple interface for marketing teams
- ⚡ Instant Generation - Create banners in seconds, not minutes
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe code
- Tailwind CSS - Utility-first styling
- shadcn/ui - Beautiful, accessible UI components
- HTML5 Canvas - Banner rendering and export
- lucide-react - Icon library
- Node.js 18+
- FFmpeg and ffprobe available on
PATHfor server-side SSP Twitter video exports - npm or yarn
- Clone the repository or navigate to the project directory:
cd bannermaker- Install dependencies:
npm install-
Add your background images:
- Place 5 background images (1200×650px) in
public/backgrounds/ - Name them:
bg1.jpg,bg2.jpg,bg3.jpg,bg4.jpg,bg5.jpg - Update names in
components/banner/BannerEditor.tsxif needed
- Place 5 background images (1200×650px) in
-
Run the development server:
npm run dev- Open http://localhost:3000 in your browser
When an SSP video is selected, Twitter Export (<5 MB) sends the banner to the
Next.js server for processing and downloads an H.264 MP4. SSP image exports keep
using the existing PNG and WebP controls. The video exporter targets 4.8 MiB.
The production Docker image installs FFmpeg automatically. Local development
requires both ffmpeg and ffprobe to be installed and available on PATH.
- Enter Text: Type your headline and description in the left panel
- Choose Background: Select a background from the dropdown menu
- Preview: See your banner update live on the right panel
- Export: Click "Export as PNG" or "Export as WebP" to download
bannermaker/
├── app/
│ ├── page.tsx # Main page
│ ├── layout.tsx # Root layout
│ └── globals.css # Global styles
├── components/
│ ├── ui/ # shadcn/ui components
│ │ ├── button.tsx
│ │ ├── input.tsx
│ │ ├── textarea.tsx
│ │ ├── select.tsx
│ │ ├── card.tsx
│ │ └── label.tsx
│ └── banner/ # Banner-specific components
│ ├── BannerEditor.tsx # Main editor component
│ ├── BannerCanvas.tsx # Canvas rendering logic
│ ├── TextEditor.tsx # Text input form
│ └── BackgroundSelector.tsx
├── public/
│ └── backgrounds/ # Background images
│ ├── bg1.jpg
│ ├── bg2.jpg
│ ├── bg3.jpg
│ ├── bg4.jpg
│ └── bg5.jpg
└── lib/
└── utils.ts # Utility functions
Edit the constants in components/banner/BannerCanvas.tsx:
const CANVAS_WIDTH = 1200
const CANVAS_HEIGHT = 650Modify the position constants in components/banner/BannerCanvas.tsx:
const LOGO_POSITION = { x: 145, y: 170 }
const HEADLINE_POSITION = { x: 145, y: 350 }
const SUBTEXT_POSITION = { x: 145, y: 420 }Update font settings in components/banner/BannerCanvas.tsx:
const HEADLINE_FONT = "bold 48px Inter, system-ui, -apple-system, sans-serif"
const SUBTEXT_FONT = "400 24px Inter, system-ui, -apple-system, sans-serif"Edit the DEFAULT_BACKGROUNDS array in components/banner/BannerEditor.tsx:
const DEFAULT_BACKGROUNDS: BackgroundOption[] = [
{ id: '1', name: 'Tech Grid', path: '/backgrounds/bg1.jpg' },
// Add more backgrounds here
]npm run build
npm run start- Push your code to GitHub
- Import the project in Vercel
- Deploy with one click
This Next.js app can be deployed to:
- Netlify
- AWS Amplify
- Railway
- Render
- Any platform supporting Next.js
MIT
For issues or questions, please open an issue in the repository.
Built with ❤️ for marketing teams everywhere