HTML Viewer

Paste raw HTML on the left, edit visually (WYSIWYG) on the right. Instant two-way sync.

HTML Raw

<h1>Welcome to HTML Viewer</h1>
<p>Type <strong>HTML</strong> in the left column and edit visually (WYSIWYG) in the right column. Changes are <em>synchronized both ways</em> instantly.</p>
<h2>Text Formatting</h2>
<p><strong>Bold</strong>, <em>italic</em>, <u>underline</u>, <s>strikethrough</s>, <code>inline code</code>, X<sub>2</sub>, X<sup>2</sup>, <mark>highlight</mark>, and <span style="color: #2563eb">text color</span>.</p>
<h2>Table</h2>
<table style="border-collapse:collapse;width:100%;">
  <tbody>
    <tr><th style="border:1px solid #d4d4d8;padding:6px 10px;background:#f4f4f5;text-align:left;font-weight:600;">Product</th><th style="border:1px solid #d4d4d8;padding:6px 10px;background:#f4f4f5;text-align:left;font-weight:600;">Price</th></tr>
    <tr><td style="border:1px solid #d4d4d8;padding:6px 10px;">Coffee</td><td style="border:1px solid #d4d4d8;padding:6px 10px;">$1.50</td></tr>
    <tr><td style="border:1px solid #d4d4d8;padding:6px 10px;">Milk Tea</td><td style="border:1px solid #d4d4d8;padding:6px 10px;">$2.00</td></tr>
  </tbody>
</table>
<h2>Task List</h2>
<ul data-type="taskList" style="list-style:none;margin:0;padding:0;">
  <li data-type="taskItem" data-checked="true" style="display:flex;align-items:flex-start;gap:0.5rem;margin:0.25rem 0;">Setup project</li>
  <li data-type="taskItem" data-checked="false" style="display:flex;align-items:flex-start;gap:0.5rem;margin:0.25rem 0;">Write documentation</li>
</ul>
<blockquote>This is a sample blockquote.</blockquote>

Editor