Free Online Social Media Post Mockup Generator

Concept Overview

A high-quality, browser-based utility that allows users to create realistic mockups of social media posts. The application provides a split-pane interface where users input content on one side and see a real-time, pixel-perfect render on the other. It is designed for marketers, designers, and content creators to visualize ideas quickly without requiring graphic design software.

Core Features

• Real-Time Preview Canvas: An interactive display that updates instantly as users type or adjust settings.
• Customizable Data Inputs:
  • Profile information (Name, Handle, Profile Image upload).
  • Post content (Primary text, shared image/link preview).
  • Engagement metrics (Likes, comments, shares, timestamp).
• High-Resolution Export: A "Save as PNG" button that uses the HTML5 Canvas API to capture the rendered preview with high fidelity.
• Responsive Interface: Automatically switches between a split-screen (desktop) and a stacked (mobile) layout.
• Accessibility-First Design: High-contrast text, clear input labels, and intuitive interaction flows.

UI/UX Specification

• Layout:
  • Header: Clean, minimalist title.
  • Main Area: A flexbox container separating the "Editor" panel (left/top) and "Preview" panel (right/bottom).
  • Inputs: Grouped by section (User Info, Post Content, Engagement Metrics) using toggleable accordion sections to manage screen real estate.
• Color Palette (Light Mode Only):
  • Primary Background: #FFFFFF
  • Section/Card Background: #F8FAFC
  • Border/Divider: #E2E8F0
  • Primary Accent (Buttons): #3B82F6
  • Typography (Text): #1E293B (Dark Slate)
  • Typography (Secondary): #64748B (Muted Slate)
• Animations:
  • Subtle, smooth transitions on input focus and hover states.
  • Smooth fading of modal dialogs (custom-coded, no browser alerts).

Technical Implementation Directives

• Single File Constraint: All HTML, CSS, and Vanilla JavaScript must exist within a single index.html file.
• State Management:
  • Strict usage of in-memory JavaScript variables.
  • DO NOT use localStorage, sessionStorage, or cookies. The tool must function in a sandboxed iframe without persistent storage.
• Media Handling:
  • Use the FileReader API for local image uploads (profile picture/post content) into the canvas.
• Export Logic:
  • Utilize HTMLCanvasElement to programmatically render the post mockup based on user-provided state values.
  • Trigger a blob download for the final PNG output.
• Dependencies:
  • Tailwind CSS (via CDN) for styling layout.
  • Lucide Icons (via CDN) for iconography.
  • Inter Font (via Google Fonts).

Developer Checklist

• Ensure all links include target="_blank" and rel="noopener noreferrer".
• Replace all alert() or prompt() calls with custom UI-based overlays.
• Verify image rendering works within a null-origin iframe (no cross-origin restrictions on local files).
• Ensure the export button renders a clean PNG without background artifacts.