Your little design friend with great taste.
Create social media banners and hero shots in the browser.
Live: https://niclassslua.github.io/banny/
Features • Quick Start • Tech Stack • Structure
- 50+ CSS patterns — Atmospheric, radial, geometric, angular, organic, and playful styles
- Live typography — Font style (bold, italic, underline, strikethrough), size, alignment, 24+ fonts, text color
- Two-tone + scale — Two pattern colors and a scale slider for instant visual tweaks
- PNG export — One-click download of the current banner as PNG
- Preset import/export — Save and load full workspace state as JSON
- Auto-save — Workspace state persisted in
localStorage - i18n — German and English UI (switch in the header)
- Responsive — Works on desktop and tablet; sticky sidebar and clear layout
How a missing Obsidian banner turned into this:
Banny started because I wanted nice banners for my Obsidian notes and couldn't justify opening an image editor every single time, let alone paying for an online "Notion banner creator" tool just to get more than three designs. So I built my own instead.
It was rough for a while, half-working and only running locally. But having banners that actually matched my uni courses, each with its own color, an emoji, a bit of personality, made my notes feel like mine. That was motivation enough to see it through. Eventually I sat down with Cursor, cleaned everything up, and gave the project a proper identity, mascot included. GitHub Pages took care of the rest.
git clone https://github.com/your-username/bannercreator.git
cd bannercreator
npm install
npm run devOpen http://localhost:3002 and click Launch the creator (or go to /creator).
| Area | Tech |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI | React 19, Tailwind CSS, Framer Motion |
| Icons | Lucide, Tabler Icons, React Icons |
| i18n | next-intl |
| Export | html-to-image (PNG) |
| Tests | Jest, Testing Library |
src/
├── app/
│ ├── page.tsx # Landing page
│ ├── creator/page.tsx # Creator workspace (orchestrator)
│ └── layout.tsx # Root layout (i18n + notifications)
├── components/
│ ├── Sidebar/ # Typography controls
│ ├── Preview/ # BannerPreview
│ ├── Settings/ # Colors & scale panel
│ ├── Notifications/ # Toast provider
│ └── atoms | molecules | organisms/
├── constants/
│ ├── patterns.ts # 50+ pattern definitions + category labels
│ ├── colors.ts
│ └── fonts.ts
├── hooks/
│ ├── useWorkspaceState.ts # State + localStorage persist
│ └── usePatternFilters.ts # Category filter + filtered list
├── utils/
│ ├── parseCSS.ts # Pattern CSS → inline styles
│ ├── fileName.ts # sanitizeFileName
│ ├── validation.ts # isValidWorkspaceState, isValidTextStyles
│ ├── downloadBanner.ts # PNG export
│ ├── exportWorkspace.ts # Preset JSON export
│ └── importWorkspace.ts # Preset JSON import + validation
├── messages/
│ ├── de.json
│ └── en.json
└── i18n/
└── request.ts # Default locale for static export; client switch via LocaleProvider
| Path | Description |
|---|---|
/ |
Landing page — hero, features, CTA to creator |
/creator |
Full workspace — sidebar, preview, pattern grid, colors & scale, export/import/reset/download |
MIT. See LICENSE for details.