Free Markdown HTML Tag Whitelist Sanitizer & Live Previewer

Overview

This single-file web application is designed for developers, content managers, and writers who need to securely sanitize Markdown-to-HTML conversions. Users can input Markdown (with embedded HTML), define a specific whitelist of allowed HTML tags, and instantly see the sanitized, rendered output.

Technical Specifications

• Architecture: Single-file HTML (Vanilla JS, CSS3, HTML5). No build steps or frameworks.
• Storage: Stateless (In-memory variables only). No localStorage, sessionStorage, or cookies to ensure compatibility with sandboxed iframe environments.
• Dependencies: Use CDN links for marked.js (Markdown parsing) and dompurify (Core sanitization engine).

Features

1. Dual-Pane Interface:
   • Left: Markdown Editor (with basic line numbering).
   • Right: Live Preview of sanitized HTML output.
2. Custom Whitelist Configuration:
   • A multi-select or tag-input component allowing users to define permitted HTML tags (e.g., p, b, i, ul, li).
   • A 'Reset' button to restore a standard safe default list.
3. Sanitized Code Output:
   • A secondary tab or view to copy the raw, sanitized HTML string.
4. Copy-to-Clipboard:
   • Smooth micro-interaction when copying raw HTML code.
5. Responsive Design:
   • Desktop: Side-by-side layout.
   • Mobile: Vertical stack (Editor > Whitelist > Preview).

UI/UX Design

• Color Palette: Professional SaaS aesthetic:
  • Background: #f8fafc (Slate 50).
  • Primary: #4f46e5 (Indigo 600) for primary actions.
  • Border/UI Elements: #e2e8f0 (Slate 200).
  • Typography: Inter/System sans-serif, size 14px-16px.
• Animations:
  • Smooth transitions for tab switching using CSS opacity and transform.
  • Subtle hover states on buttons (slight scale 1.02, elevation).
  • No aggressive browser alerts: Use clean, overlay-based 'toast' notifications for 'Copied to Clipboard'.

Developer Directives

1. Sandboxed Compatibility: Absolutely no prompt(), alert(), or confirm(). Use custom DOM modal elements if confirmation is required.
2. No Data Persistence: Use a simple JavaScript object to store the current configuration/content state. Do not attempt to save or retrieve state on page refresh.
3. Sanitization Logic: Utilize DOMPurify (or similar reliable library via CDN) to apply the whitelist. Ensure that when users update the whitelist, the preview updates immediately (debounce the input for performance).
4. Accessibility: Ensure all interactive elements have proper aria-labels and keyboard focus states are visible and accessible.