Technical Specification: Browser-Based Markdown Editor with Live Preview

Overview

A high-performance, single-file browser application that allows users to write Markdown text and view a real-time rendered HTML preview. Built for simplicity, speed, and privacy, this tool operates entirely in-memory.

Technical Architecture

• Single File: The entire application must be contained in a single index.html file using embedded CSS and JS.
• Parser: Use marked.js (loaded via CDN) to parse Markdown to HTML.
• State Management: All application state (text input, preview content) is stored in volatile JavaScript variables. NO localStorage, sessionStorage, or IndexedDB.
• Responsiveness: Use CSS Flexbox/Grid to handle two-pane resizing. Stack vertically on mobile devices, side-by-side on desktops.

UI/UX Design

• Aesthetic: Clean, professional "SaaS" interface. Light mode ONLY.
• Color Palette:
  • Background: #ffffff
  • Editor Background: #f8fafc
  • Text: #1e293b
  • Primary Accent (Buttons/UI): #3b82f6 (Blue)
  • Border/Secondary: #e2e8f0
• Layout:
  • Header: Sticky navigation bar containing the app title, "Download .md" button, "Copy HTML" button, and a "Clear Editor" button (with a custom modal confirmation).
  • Main Area: A split-pane view (top-bottom on mobile, left-right on desktop).
    • Left Pane: Plain-text textarea for Markdown input with monospaced font.
    • Right Pane: A div styled to render the parsed HTML output with a clean typography reset.
  • Status Bar: Bottom bar showing "Word Count" and "Character Count" updated in real-time.

Feature Set

1. Live Preview: Immediate rendering of Markdown syntax as the user types (debounced by 100ms).
2. Syntax Toolbar: A set of buttons above the textarea to insert common Markdown syntax (Bold, Italic, Link, List, Image, Code Block).
3. Safe Clearing: A custom modal window when clicking "Clear" to prevent accidental data loss.
4. Export Options:
   • Download as .md file using a Blob object.
   • One-click "Copy HTML" to clipboard.
5. Responsive Mechanics: Smooth CSS transitions for panel resizing. The UI must handle text overflow elegantly.

Development Directives

• Security: Do not use eval() or dangerous DOM injection. Use the provided sanitizer methods in the Markdown parser to prevent XSS.
• Performance: Use requestAnimationFrame or simple debouncing for the live preview to ensure 60fps typing performance.
• Accessibility: Ensure high contrast ratios (WCAG AAA compliant) for text against backgrounds.
• No External Dependencies (Minimal): Use only essential CDN-hosted libraries (e.g., marked.js for Markdown parsing, lucide-icons for vector icons). Do not bundle heavy frameworks.