📄 Markdown to HTML Converter

Write Markdown on the left and see clean HTML on the right. Copy with one click.

Markdown

Preview

Welcome to Markdown

This is a live preview of your Markdown. Start typing on the left!

Formatting

You can make text bold, italic, or ~~strikethrough~~. Use inline code or links like Useful4.life.

Lists

Free tools
No sign-up
Works on any device

Type markdown
See the preview
Copy the HTML

Code Block

function greet(name) {
  return `Hello, ${name}!`;
}

This is a blockquote. Quote your favorite lines here.

Enjoy!

Generated HTML

<h1 class="text-3xl font-bold text-[#0F172A] mt-6 mb-3">Welcome to Markdown</h1>
<p class="text-[#0F172A] leading-relaxed my-3">This is a <strong>live preview</strong> of your Markdown. Start typing on the left!</p>
<h2 class="text-2xl font-bold text-[#0F172A] mt-6 mb-3">Formatting</h2>
<p class="text-[#0F172A] leading-relaxed my-3">You can make text <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. Use <code class="bg-[#F1F5F9] px-1.5 py-0.5 rounded text-sm text-[#DC2626] font-mono">inline code</code> or links like <a href="https://useful4.life" class="text-[#0F766E] underline hover:text-[#0F5E57]" target="_blank" rel="noopener noreferrer">Useful4.life</a>.</p>
<h3 class="text-xl font-bold text-[#0F172A] mt-6 mb-3">Lists</h3>
<ul class="list-disc pl-6 my-3 space-y-1 text-[#0F172A]">
<li>Free tools</li>
<li>No sign-up</li>
<li>Works on any device</li>
</ul>
<ol class="list-decimal pl-6 my-3 space-y-1 text-[#0F172A]">
<li>Type markdown</li>
<li>See the preview</li>
<li>Copy the HTML</li>
</ol>
<h3 class="text-xl font-bold text-[#0F172A] mt-6 mb-3">Code Block</h3>
<pre class="bg-[#0F172A] text-[#E2E8F0] rounded-md p-4 overflow-x-auto my-4 text-sm font-mono" data-lang="javascript"><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-[#0F766E] pl-4 py-2 my-4 text-[#475569] italic bg-[#F8FAFC]">This is a blockquote. Quote your favorite lines here.</blockquote>
<hr class="my-6 border-t border-[#E2E8F0]" />
<p class="text-[#0F172A] leading-relaxed my-3">Enjoy!</p>