Browser tool · Utility · 2026

banner.maker

Generate a social media banner from a grid of project icons, instantly.

Role: Design + Engineering
Timeline: 2026
Stack: Next.js 16 · Tailwind v4 · html-to-image · React 19

Problem

Every project ships an icon. Very few ship a banner.

A Twitter/X profile without a banner reads as unfinished. The gap between having an icon and having a presentable header is small in theory, but every existing tool wants an account, a file upload, or a canvas-based editor that fights its own coordinate system.

banner.maker was built to close that gap in one sitting. Drop your project icons into a grid, set a background, pick a shape, download a PNG at the correct platform resolution. Nothing persists, nothing leaves the browser, and the URL hash encodes the full configuration so a shared link round-trips exactly.

The full editor at 1440px wide, preview panel above, layout and background controls below, export buttons on the right — One screen does everything: preview, layout controls, background picker, and export. The preview scales down from the real export resolution so what you see is what you get.

Decisions

Real DOM, not a canvas.

The export is rasterized from real DOM. Two identical BannerCanvas trees render simultaneously, one scaled for the on-screen preview and one hidden at the exact pixel dimensions the platform expects (1500×500 for X, 1584×396 for LinkedIn). html-to-image snapshots the hidden mirror. There is no coordinate mapping between a canvas and the DOM, no pixel-density fudge, no visual drift between the preview and the download. The tradeoff is that web fonts must be pre-loaded and cross-origin images must proxy through a single /api/proxy-image endpoint, which also strips private addresses to prevent SSRF. The squircle icon corners are a true superellipse path (|x|ⁿ + |y|ⁿ = 1, n ≈ 5) applied as an SVG mask, not a border-radius approximation.

Editor at 1440px, Twitter/X format selected, 8 icon slots, squircle shape, white background — The editor: Twitter / X at 1500×500, previewed scaled inside the card.

The examples wall on the landing page, colourful export-ready banners in both platform formats — Examples: real exports in both formats, straight from the tool.

Editor at 1280px, same layout with slightly tighter proportions — Layout and background panels side by side at 1280px.

Mobile layout, export buttons above controls, controls stacked vertically — Mobile: export buttons surface first, controls stack below.

Outcome

0 KB: Server storage: runs entirely in the browser
2: Platform formats: Twitter / X and LinkedIn
Live: Ships as a Next.js app, deployable to Vercel

The tool does one thing and the constraints are load-bearing: no accounts means no auth surface, no file storage means no cleanup, URL-encoded state means sharing is a copy-paste. The only server-side code is the image proxy, which exists purely to keep the canvas from being tainted by cross-origin resources.

Retour aux réalisations