Product Specification: HTML Breadcrumb Schema Generator (JSON-LD)

Overview

A high-performance, browser-based utility designed to help web developers, SEO specialists, and content managers generate valid JSON-LD code for website breadcrumbs. The tool ensures the markup adheres to Schema.org standards to qualify for Google Search Rich Results.

Core Features

• Dynamic Input Rows: Add or remove breadcrumb navigation items on the fly.
• Live JSON-LD Preview: The schema block updates instantly as the user types.
• One-Click Copy: Dedicated button to copy the resulting JSON-LD string to the system clipboard.
• Validating Feedback: Visual indicators if inputs are missing critical fields (Name or URL).
• Reset Functionality: Quickly clear all fields for a fresh start.
• Zero-Latency Processing: Pure client-side JavaScript ensures instant code generation without server round-trips.

Technical Implementation

• Architecture: Single-file HTML (HTML5, Vanilla JS, CSS3).
• Storage Constraints: No localStorage, sessionStorage, or cookies allowed. All state is maintained in reactive JavaScript variables.
• Dependencies: Use Tailwind CSS (via CDN) for responsive, professional UI styling and FontAwesome/Lucide for iconography.
• Iframe Compatibility: The app must be compatible with a sandboxed iframe. No popups (use custom CSS modals for success/error messages).

UI/UX Layout

• Header: Clean, minimalist title "HTML Breadcrumb Schema Generator" with a brief helper text.
• Main Content (Split Layout):
  • Left Panel (Inputs): A vertically scrollable list of breadcrumb inputs. Each item contains two text fields: "Breadcrumb Name" and "Breadcrumb URL (Path)". Includes buttons for "Add Step" and "Remove".
  • Right Panel (Output): A stylized <pre> block displaying the generated JSON-LD. Includes a "Copy to Clipboard" button with a toast-style success message.
• Responsive Behavior: On mobile screens, the left panel (inputs) stacks on top of the right panel (output).

Design Aesthetic (Light Mode Only)

• Color Palette:
  • Background: #f8fafc (Slate 50).
  • Cards/Containers: #ffffff (White) with smooth, subtle shadows (shadow-sm).
  • Primary Accent: #2563eb (Blue 600) for primary buttons.
  • Success State: #16a34a (Green 600).
  • Text Colors: #1e293b (Slate 800) for primary, #64748b (Slate 500) for secondary.
• Typography: Sans-serif, system font stack (Inter or similar).
• Animations: Subtle transition-all on button hover states and smooth fade-ins when adding/removing breadcrumb rows.

Developer Directives

1. State Management: Use an array of objects [{name: '', url: ''}] to track state.
2. Rendering: Re-render the output section whenever the state array changes.
3. Accessibility: Ensure all inputs have proper labels (e.g., aria-label).
4. Security: Sanitize all inputs to prevent XSS if displaying user-input content (though here it is used for code generation, standard practice applies).
5. Deployment: Must be a single .html file. CSS/JS should be contained within <style> and <script> tags.