这个HTML预览工具支持哪些技术？

支持HTML5、CSS3和JavaScript。所有代码都在沙箱化的iframe中运行，确保安全隔离。支持实时刷新，无需手动点击刷新按钮。

代码会保存吗？

代码仅保存在你的浏览器本地存储中，关闭页面后不会丢失。但建议定期导出备份重要代码。所有代码完全在本地运行，不会被上传到任何服务器。

可以预览响应式设计吗？

可以。你可以手动调整预览区域的大小来测试不同屏幕尺寸下的显示效果，以模拟手机、平板和桌面端的浏览体验。

支持哪些外部资源库？

你可以在HTML代码中通过CDN链接引入外部库，如通过引入jQuery、React、Vue.js等。确保使用完整的HTTPS链接。

🔧 HTML Live Preview

Free online HTML live preview editor. Write HTML/CSS/JS code on the left and see instant rendered output on the right. Features auto-refresh, responsive preview, and one-click code copy. Perfect for frontend development and learning.

HTML / CSS / JS Code

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:sans-serif;padding:20px;background:#f8fafc;color:#1e293b}
h1{color:#06b6d4}
.card{background:white;border-radius:8px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:10px 0}
button{background:#06b6d4;color:white;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}
button:hover{background:#0891b2}
</style>
</head>
<body>
<h1>👋 Hello, World!</h1>
<div class="card">
  <p>Edit code on the left, see live preview on the right.</p>
  <button onclick="alert('Hello!')">Click me</button>
</div>

<!-- 反馈收集 -->
<div id="feedback-widget" style="position:fixed;bottom:20px;right:20px;z-index:1000">
<button id="feedback-toggle" onclick="toggleFeedback()" style="width:48px;height:48px;border-radius:50%;background:rgba(6,182,212,.2);border:2px solid rgba(6,182,212,.5);color:#22d3ee;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .2s" onmouseover="this.style.background='rgba(6,182,212,.4)'" onmouseout="this.style.background='rgba(6,182,212,.2)'">💬</button>
<div id="feedback-panel" style="display:none;position:absolute;bottom:56px;right:0;width:320px;background:#1e293b;border:1px solid rgba(6,182,212,.3);border-radius:12px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
<span style="color:#f1f5f9;font-size:.95rem;font-weight:600">📝 Feedback</span>
<button onclick="toggleFeedback()" style="background:none;border:none;color:#64748b;font-size:1.2rem;cursor:pointer">✕</button>
</div>
<select id="feedback-type" style="width:100%;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:8px 10px;color:#e2e8f0;font-size:.85rem;margin-bottom:8px;outline:none">
<option value="feedback">💡 Feature Request</option>
<option value="bug">🐛 Bug Report</option>
<option value="other">💬 Other</option>
</select>
<textarea id="feedback-text" placeholder="Describe your suggestion or issue..." style="width:100%;height:100px;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:10px;color:#e2e8f0;font-size:.85rem;resize:vertical;outline:none;font-family:inherit" maxlength="1000">

0/1000

Preview (live rendering)

🔧 HTML Live Preview

FAQ

这个HTML预览工具支持哪些技术？

代码会保存吗？

可以预览响应式设计吗？

支持哪些外部资源库？