Markdown Previewer

Markdown Previewer showing split view with input editor and live preview pane

Technologies Used

ReactJavaScriptCSS
→ Visit Live Project→ Source Code

Overview

A real-time markdown editor with live preview for testing and learning markdown syntax.

Challenges

  • 1Rendering markdown safely without XSS vulnerabilities
  • 2Maintaining smooth real-time updates as users type
  • 3Creating an intuitive split-pane layout

Solutions

  • Used DOMPurify to sanitize and safely render markdown HTML
  • Implemented React hooks for efficient state management and debounced updates
  • Built responsive split-pane UI that stacks on mobile devices

Results

Zero security vulnerabilities, instant preview with <100ms render time, responsive across all devices

Explore More

Back to All ProjectsHome