Home > Dav > Html Preview
👁️

HTML Preview

Preview HTML code in real-time with responsive design testing.

HTML Code

Preview

Responsive Preview

HTML Examples

Features

  • ✨ Real-time HTML preview
  • 📱 Responsive design testing (Desktop, Tablet, Mobile)
  • 💾 Download HTML files
  • 📋 Easy copy to clipboard functionality
  • ⚡ Auto-preview option
  • 🎨 Ready-to-use HTML examples
  • 💻 Works entirely in your browser

Related Tools

View All Development Tools

Basic HTML Example

This is a simple HTML document structure.

It includes a doctype declaration, head section with metadata, and a body section with content.

Subheading

You can add multiple levels of headings and paragraphs.

`, form: ` Html Preview - Code Tools | OOPEN AII

Contact Form

`, table: ` Html Preview - Code Tools | OOPEN AII

Sample Table

ID Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Active
3 Mike Johnson mike@example.com Inactive
4 Sarah Williams sarah@example.com Active
`, grid: ` Html Preview - Code Tools | OOPEN AII

Responsive Grid Layout

This layout adapts to different screen sizes

Card 1

This is a sample card with some content.

Card 2

This is a sample card with some content.

Card 3

This is a sample card with some content.

Card 4

This is a sample card with some content.

Card 5

This is a sample card with some content.

Card 6

This is a sample card with some content.

` }; // Update preview function function updatePreview() { const html = htmlInput.value; // Update main preview previewFrame.srcdoc = html; // Update responsive preview responsivePreviewFrame.srcdoc = html; } // Clear function function clearHTML() { htmlInput.value = ''; updatePreview(); showMessage('success', 'HTML cleared'); } // Copy function function copyHTML() { htmlInput.select(); navigator.clipboard.writeText(htmlInput.value).then(() => { showMessage('success', 'HTML copied to clipboard'); }).catch(err => { showMessage('error', 'Failed to copy HTML'); }); } // Download function function downloadHTML() { const html = htmlInput.value; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'preview.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showMessage('success', 'HTML file downloaded'); } // Toggle auto preview function toggleAutoPreview() { autoPreview = !autoPreview; autoPreviewBtn.textContent = `Auto Preview: ${autoPreview ? 'ON' : 'OFF'}`; showMessage('success', `Auto preview ${autoPreview ? 'enabled' : 'disabled'}`); } // Change device preview function changeDevicePreview() { const device = deviceSelector.value; // Remove all device classes deviceFrame.className = 'device-frame'; // Add selected device class deviceFrame.classList.add(`${device}-frame`); // Force reflow to apply new dimensions void deviceFrame.offsetWidth; // Refresh preview updatePreview(); } // Load example function loadExample(exampleType) { htmlInput.value = htmlExamples[exampleType]; updatePreview(); showMessage('success', `${exampleType.charAt(0).toUpperCase() + exampleType.slice(1)} example loaded`); } // Show message function showMessage(type, text) { message.textContent = text; message.className = 'message ' + type; setTimeout(() => { message.className = 'message'; }, 3000); } // Event Listeners previewBtn.addEventListener('click', updatePreview); clearBtn.addEventListener('click', clearHTML); copyBtn.addEventListener('click', copyHTML); downloadBtn.addEventListener('click', function(e) { e.preventDefault(); // 防止a标签的默认行为 if (!this.href) { Utils.showNotification('No image available to download', 'error'); return; } // 创建临时下载链接以确保下载正常工作 const tempLink = document.createElement('a'); tempLink.href = this.href; tempLink.download = this.download || 'html-preview.png'; tempLink.style.display = 'none'; document.body.appendChild(tempLink); tempLink.click(); // 清理 setTimeout(() => { document.body.removeChild(tempLink); }, 100); }); // Initialize updatePreview();