Free Online Social Media Link Card Previewer

Overview

A high-performance, single-file browser utility designed to help developers and content creators preview how their website metadata will render on social sharing platforms. This tool provides an immediate visual confirmation of title, description, and image placement, along with a code generator for the necessary meta tags.

Core Features

• Real-time Live Preview: The preview pane updates instantaneously as the user modifies input fields.
• Multiple Card Modes: Toggle between standard summary view and large image summary views.
• Meta Tag Generator: Automatically generates the required <meta> HTML tags (Open Graph and standard meta types) based on user input for easy copy-pasting.
• Viewport Toggle: Switch between Desktop and Mobile preview aspect ratios.
• Accessibility First: Full support for screen readers and keyboard navigation.
• Zero-Storage Architecture: Designed specifically for the browser's memory, ensuring total privacy and security.

Technical Specification

• Architecture: Single-file HTML/CSS/JS architecture. All assets are either embedded or linked via reliable CDNs.
• State Management: Uses simple Vanilla JS objects to hold application state. No localStorage or persistence.
• Styling:
  • Palette: #F8FAFC (Background), #FFFFFF (Cards), #64748B (Muted Text), #2563EB (Action Blue), #E2E8F0 (Border).
  • Typography: Sans-serif system font stack for maximum readability and speed.
  • Transitions: 200ms ease-in-out transitions on all input focus events and container interactions.
• Layout:
  • Header: Minimalist title and description.
  • Main: A two-column split-screen on desktop; a stacked vertical layout on mobile devices using CSS Flexbox/Grid.
  • Editor Panel: Labeled input fields for Title, Description, Image URL, and Site Name.
  • Display Panel: A fixed-width container mirroring standard social media feed layouts.

Directives for Implementation

1. Do not implement branding: Ensure the UI is generic and focuses purely on utility. No logos or fictional names.
2. Compliance: Avoid all localStorage and cookie APIs to prevent DOMException errors within the sandboxed environment.
3. Interactivity: Use requestAnimationFrame for smooth rendering of the live preview updates.
4. Responsiveness: Ensure the preview container has a max-width to simulate real-world mobile displays accurately.
5. Security: All generated outputs must be sanitized if rendered in the preview, and any external image URLs should be treated as untrusted input (render via <img> tag with crossorigin='anonymous' attribute).