HTML & Markdown Preview Tool

Paste HTML or Markdown content and see it rendered in real-time

HTML Input

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      margin: 0;
    }
    h1 {
      color: #3B82F6;
      animation: fadeIn 1s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      padding: 8px 12px;
      margin: 4px 0;
      background: #f0f0f0;
      border-radius: 4px;
      transition: background 0.2s;
    }
    li:hover {
      background: #e0e0e0;
    }
    .btn {
      background: #3B82F6;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn:hover {
      background: #2563EB;
    }
    #counter {
      font-size: 24px;
      font-weight: bold;
      color: #3B82F6;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is a sample HTML content with CSS and JavaScript.</p>
  
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <div id="counter">0</div>
  <button class="btn" onclick="increment()">Click Me (+1)</button>
  <button class="btn" onclick="reset()" style="background: #EF4444;">Reset</button>
  
  <script>
    let count = 0;
    
    function increment() {
      count++;
      document.getElementById('counter').textContent = count;
    }
    
    function reset() {
      count = 0;
      document.getElementById('counter').textContent = count;
    }
    
    console.log('JavaScript is running!');
  </script>
</body>
</html>