Technical Specification: Free Online Meme Template Builder

Overview

A high-performance, single-file, browser-based Meme Template Builder. This tool enables users to select from a library of classic meme templates or upload their own images, overlay custom text, adjust typography, and download the final composition as a high-quality JPEG or PNG.

Key Features

• Canvas-Based Rendering: Utilize the HTML5 Canvas API for real-time, high-fidelity image composition.
• Preset & Custom Templates: A clean gallery of starter templates (provided via base64 or external URLs) combined with a local file-picker for custom background uploads.
• Dynamic Text Overlays: Multiple draggable and resizable text input layers.
• Typography Controls: Options for font size, text alignment, stroke (outline) thickness, text color, and uppercase toggling.
• Responsive Workspace: A mobile-first design that scales the canvas and editor controls for seamless use on phones, tablets, and desktops.
• Direct Download: Export functionality using canvas.toDataURL() to trigger an immediate browser download.

UI/UX Design (Light Mode Only)

• Color Palette: A professional, vibrant light-mode theme.
  • Background: Off-white (#f8fafc) for the body and main workspace.
  • Surfaces: Pure white (#ffffff) for control panels with soft, premium shadows (shadow-md).
  • Primary Buttons: Vivid blue (#2563eb) with white text.
  • Text: Dark gray (#1e293b) for readability.
• Layout:
  • Header: Sticky top header with app title and simple instruction tooltip.
  • Main Area: Split-screen layout. Left side (or top on mobile) displays the canvas preview. Right side (or bottom on mobile) displays a scrollable editing panel with tabs for 'Template', 'Text', and 'Export'.
• Animations: Subtle, ease-in-out transitions (200ms) on button hovers and modal appearances. No jarring shifts; everything should feel fluid.

Technical Implementation Directives

• Single-File Architecture: All HTML, CSS, and Vanilla JavaScript must reside in one file. No bundlers. Use CDNs for essential icons (e.g., Lucide or FontAwesome).
• Sandboxed Compatibility:
  • NO LOCALSTORAGE: Absolutely no cookies, local storage, or session storage. Maintain state within a single JavaScript state object.
  • NO ALERTS: If a user action requires a warning (e.g., resetting the canvas), use a custom HTML modal (dialog element) instead of window.confirm() or window.alert().
  • EXTERNAL LINKS: All external resources (if any) must use target="_blank" rel="noopener noreferrer".
• Canvas Handling: Ensure the canvas responds correctly to window.resize events, maintaining the aspect ratio of the loaded background image while ensuring the text overlays remain properly scaled.

Developer Instructions

1. Use a clear, modular JavaScript approach (functional programming preferred for state management).
2. CSS must be written in a clean, utility-first manner (e.g., using Tailwind CSS via CDN is permitted to ensure consistent aesthetics).
3. Prioritize input validation: Ensure images uploaded are sanitized and correctly handled by the FileReader API.
4. Design the 'Download' feature to generate a filename automatically based on the current timestamp to avoid collisions.