Free Markdown HTML Tag Sanitizer & Previewer Tool

Markdown HTML Tag Sanitizer & Previewer: Technical Specification

Overview

A client-side web application designed to allow developers and content creators to input Markdown content, apply a strict HTML tag whitelist, and view the sanitized preview in real-time. This tool prevents XSS attacks by filtering out prohibited HTML tags while maintaining valid Markdown structure.

Core Features

• Live Markdown Parsing: Uses marked.js to instantly convert input text into HTML preview.
• Configurable Whitelist: A user-friendly settings panel to toggle commonly used HTML tags (e.g., <a>, <b>, <img>, <table>).
• Real-time Sanitization: Uses DOMPurify to filter the HTML output based on the user's specific whitelist settings.
• Copy to Clipboard: One-click functionality to copy the sanitized HTML code block.
• Responsive Split-Pane Interface: A modern dual-column layout for desktop; automatically switches to a stacked view on mobile devices.

UI/UX Design

• Aesthetic: Light-mode only. Use a clean white/gray background (Tailwind bg-slate-50), slate text (slate-800), and a crisp blue (blue-600) as the primary accent color.
• Layout:
  • Header: Minimalist title and short usage instruction.
  • Toolbar: Row of buttons for 'Clear All', 'Copy HTML', and 'Export'.
  • Input/Settings: A left-hand vertical column containing the Markdown textarea and the tag selection checkbox group.
  • Preview: A right-hand output container that renders the sanitized Markdown as live HTML.
• Animations: Subtle transition-all on hover states for buttons. Smooth fade-in animations for the preview pane when content is updated.

Technical Architecture

• Constraint Compliance:
  • Zero Storage: No localStorage, sessionStorage, or cookies. State is held in volatile memory variables.
  • Iframe Safe: Code handles DOM events carefully, avoiding eval() or dangerous innerHtml assignments without passing them through the sanitizer first.
  • Single File: All logic, including CDN-loaded dependencies (marked.js, DOMPurify, Tailwind CSS), embedded within a single HTML file.
• Dependency Management:
  • Use <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> for parsing.
  • Use <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script> for sanitization.
  • Style via Tailwind CDN to ensure rapid, consistent styling without complex CSS files.

Developer Directives

1. Ensure the UI includes a 'Sanitized HTML' toggle to view the code source instead of the rendered preview.
2. Do not use any alerts or prompts. If a copy action is performed, show a subtle floating toast message that disappears after 2 seconds.
3. Implement a debouncer on the input field (250ms) to prevent excessive re-parsing during rapid typing.
4. Ensure the design is strictly light-mode using high-contrast slate colors for text and clean whitespace for readability.