HTML & Markdown Preview Tool
Paste HTML or Markdown content and see it rendered in real-time
HTML Preview
Markdown Preview
HTML Input
Copy
Paste
Clear
<!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>
Preview