Technical Specification: Online HTML5 Boilerplate Generator

Overview

A high-performance, single-file browser utility designed to help developers quickly scaffold standard HTML5 projects. The tool provides a clean UI where users can toggle common dependencies (Tailwind, FontAwesome, etc.) and metadata, resulting in an instant, copy-ready boilerplate file.

Core Features

• Live Code Preview: An auto-updating code block that reflects user settings in real-time.
• Dependency Toggles: One-click integration for Tailwind CSS (via CDN), Google Fonts (Inter/Roboto), FontAwesome, and standard Reset CSS.
• Metadata Configuration: Inputs for Page Title, Meta Description, Author, and Language settings.
• One-Click Export: Features a 'Copy to Clipboard' function and a 'Download .html file' button.
• No Persistence: Fully client-side; strictly ephemeral.

UI/UX Design

• Layout: Two-column split interface. Left side contains the configuration form (controls). Right side displays the read-only generated code in a syntax-highlighted block.
• Theme: Clean, bright 'SaaS' aesthetic. Uses a white-dominant interface with soft grey background sections (#f8fafc) and a vibrant primary blue (#2563eb) for action buttons.
• Typography: Sans-serif stack (Inter/System UI) for readability.
• Responsive Behavior: On desktop, side-by-side view. On mobile, the code viewer shifts below the configuration form.

Interaction Design

• Feedback: Instead of native browser alerts, use a custom, floating Toast notification for 'Copied to Clipboard' success messages.
• Transitions: Use transition: all 0.2s ease-in-out on all interactive elements (buttons, inputs) for a polished feel.
• Modals: Any confirmation steps (e.g., reset settings) will be rendered as lightweight HTML overlays, not browser popups.

Technical Implementation Constraints

• Single File: All HTML, CSS (Tailwind via CDN), and Vanilla JavaScript (ES6+) must exist in one .html file.
• Storage: STRICTLY FORBIDDEN to use localStorage, sessionStorage, or cookies. Use only volatile JS variables for state management.
• Sandboxing: Code must be compatible with a sandboxed iframe (no navigation, no popup windows, no data persistence).
• Performance: Ensure minimal re-renders of the code block. Use a single input event listener or a 'debounce' mechanism to update the preview pane.
• Accessibility: Ensure all inputs have proper labels, keyboard navigation support, and sufficient color contrast ratios.