FB Post Generator 🎨

A browser-based social media poster designer. Compose attractive posts with a live preview and export them as high-resolution PNG images — ready to upload to Facebook, Instagram, TikTok or YouTube.

Features

• 100+ ready-made designs — open the ✨ Designs gallery, browse by category (Promo, Quote, Event, Wedding, Fashion, Education, Music, Sports, Seasonal, Business, Islamic, Urdu, …) and apply with one click. Each card is a live thumbnail.
• Drag to position — drag any element directly on the canvas, or fine-tune with Move X / Move Y sliders (with a one-click reset).
• Gradient text — multi-line gradient fill on any text block (from / to / angle).
• Export PNG, JPG or PDF — pick the format and resolution (1× / 2× / 3×).
• Multi-page carousels — add multiple slides, reorder/duplicate/delete them, and export all slides at once (numbered PNG/JPG or a single multi-page PDF).
• Undo / redo — full history with Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z (or Ctrl+Y).
• Background image upload — cover/contain fit with an optional dark overlay.
• Text outline / stroke — width + color around the glyphs.
• Shapes & stickers — rectangle, circle, line, arrow, triangle and star, each with fill, stroke, size, rotation and shadow.
• Rotate any element — text, image or shape (−180° … 180°).
• Alignment guides + snapping — drag an element and it snaps to the canvas centre and to other elements' edges/centres, with live guide lines (hold Shift to disable).
• Brand kit — save colours to a reusable palette shown under every colour picker (click a swatch to apply, right-click to remove).
• Search the gallery — filter 100+ designs by name or category.
• Save / open projects — export the whole multi-page project to a .json file and reopen it later (⬇ .json / 📂 Open).
• Arrow-key nudge — move the selected element 1px with arrow keys, 10px with Shift.
• Layer opacity on text and shapes (images & QR too).
• Curved / circular text — bend any text into an arc (−180° … 180°).
• QR code element — generate a scannable QR from any URL/text, with custom foreground/background colors; rendered as crisp SVG so it exports sharp.
• Multi-select & group move — Shift/Ctrl-click (canvas or list) to select several elements and drag them together.
• Align & distribute — align the selection to the canvas (or to each other) left/ center/right/top/middle/bottom, and distribute 3+ elements evenly.
• Lock & hide elements from the layer list (🔒 / 👁).
• Shape fills — solid, gradient, dotted or striped.
• Card showcase pack — 15 ready designs inspired by modern UI cards (luxury quote, playful product, pricing, profile, top-secret file, neo-brutalist, holographic, aurora glass, paper note, split poster…), in the Cards gallery category.
• Installable PWA — works offline after first load (app shell + fonts cached).
• Save your own templates to the browser (localStorage) and reopen them from the gallery's My Templates tab.
• Add / remove / reorder elements — any number of text blocks plus image/logo uploads. Click an element on the canvas to select & edit it.
• Emoji picker for inserting emojis into any text block.
• Platform presets — Facebook, Instagram, TikTok, YouTube sizes (+ custom W×H).
• English & Urdu fonts — 16+ Urdu/Arabic faces (Noto Nastaliq, Gulzar, Amiri, Aref Ruqaa, Cairo, Vazirmatn, …); Urdu renders right-to-left automatically. Jameel Noori Nastaleeq supported via self-host (see below).
• Per-element controls — each text/image element has its own:
  • font family, font size, line height, font weight (limited to weights the font actually supports), letter spacing, alignment
  • text color + optional block background color
  • padding & margin — linked (all sides together) or independent per side
  • text shadow and box shadow (offset / blur / spread / color)
  • border radius
• Background — solid color or gradient (8 presets + custom from/to/angle).
• Live, auto-scaled preview rendered at true pixel size.
• Export at 1× / 2× / 3× as PNG or JPG, or as a single-page PDF.

Jameel Noori Nastaleeq (optional)

This font isn't on Google Fonts. To enable it, drop the font file at:

public/fonts/JameelNooriNastaleeq.ttf

Until you add it, the "Jameel Noori Nastaleeq" option falls back to Noto Nastaliq Urdu.

Run

npm install
npm run dev

Open http://localhost:5173

Build

npm run build
npm run preview

Stack

• React + TypeScript + Vite
• html-to-image for PNG/JPG export
• jspdf for PDF export
• qrcode for QR generation
• Google Fonts (loaded in index.html)