HTML Viewer

เขียนหรือวาง HTML และดูผลลัพธ์การแสดงผลทันทีในเบราว์เซอร์

เลย์เอาต์:สคริปต์อยู่ใน sandbox และไม่สามารถรันได้

HTML Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

ตัวอย่าง

เกี่ยวกับเครื่องมือนี้

HTML Viewer ให้คุณเขียนหรือวางโค้ด HTML และเห็นการแสดงผลในเบราว์เซอร์ทันที การแสดงตัวอย่างแสดงใน sandbox iframe โดยปิดใช้งานสคริปต์ คุณจึงสามารถดูตัวอย่าง HTML จากแหล่งที่ไม่น่าเชื่อถือได้อย่างปลอดภัย

รองรับเอกสาร HTML เต็มรูปแบบ (รวมถึง head, inline CSS และ style blocks) และ HTML fragments การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

วิธีใช้งาน

พิมพ์หรือวาง HTML ในโค้ดเอดิเตอร์ทางซ้าย
คลิกเรนเดอร์เพื่ออัปเดตการแสดงตัวอย่าง
เปลี่ยนเป็นเลย์เอาต์แบบซ้อนกันเพื่อพื้นที่แสดงตัวอย่างที่สูงขึ้น
ใช้ Tab เพื่อเยื้องบรรทัดในเอดิเตอร์

กรณีการใช้งาน

นักพัฒนา frontend ทดสอบ HTML snippets อย่างรวดเร็ว นักพัฒนาอีเมลดูตัวอย่าง HTML email templates นักเรียนที่เรียน HTML ทดลองกับแท็กและดูผลลัพธ์ทันที ผู้ตรวจสอบโค้ดตรวจสอบผลลัพธ์การแสดงผลด้วยสายตา

คำถามที่พบบ่อย

ทำไมสคริปต์ถึงถูกปิดใช้งาน? — iframe แสดงตัวอย่างใช้ sandbox="allow-same-origin" เพื่อบล็อกการรัน JavaScript ให้คุณสามารถดูตัวอย่าง HTML จากแหล่งที่ไม่รู้จักได้อย่างปลอดภัย
สามารถดูตัวอย่าง CSS ได้ไหม? — ได้ รวม style tags ใน HTML หรือใช้ inline styles สไตล์ชีตภายนอกจาก origin อื่นอาจถูกบล็อกโดย CSP
รองรับเอกสาร HTML เต็มรูปแบบหรือไม่? — รองรับ คุณสามารถวางเอกสาร HTML เต็มรูปแบบรวมถึง DOCTYPE, head และ body