HTML Live Preview

Write HTML, CSS, and JavaScript in the editor and see the rendered output update in real-time.

0 chars 0 lines
HTML / CSS / JS
Preview
Live

Related Tools

HTML Beautifier

Format and indent HTML code

CSS Beautifier

Format and prettify CSS

Markdown Preview

Live Markdown renderer
🔗 Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/html-preview" width="100%" height="700" style="border:1px solid #ccc;border-radius:8px;" title="HTML Live Preview"></iframe>

Frequently Asked Questions

How does the HTML live preview work?▼
As you type HTML, CSS (in style tags), or JavaScript (in script tags) into the editor, the preview pane automatically updates with a short debounce delay. The preview runs inside a sandboxed iframe for security, rendering your code exactly as a browser would display it.
Can I use CSS and JavaScript in this editor?▼
Yes. You can include CSS inside <style> tags and JavaScript inside <script> tags within your HTML. The editor supports the full HTML5 specification, including inline styles, embedded stylesheets, and JavaScript. You can also use external resources via CDN links.
Is my code saved or sent to a server?▼
No. All code editing and preview rendering happens entirely in your browser. Nothing is sent to any server. Your code stays private and local. You can download your work as an HTML file at any time.

Choose a Template

🏠
Landing Page
Hero, features, CTA
📝
Contact Form
Styled form with validation
🎴
Card Layout
Responsive card grid
📊
Data Table
Sortable styled table
✨
Animated
CSS animations demo
📄
Minimal
Clean blank boilerplate
\n\n', card: '\n\n\n \n\n\n

Project Showcase

\n
\n
\n
🚀
\n
\n

Rocket Analytics

\n

Real-time analytics dashboard with interactive charts and export capabilities.

\n ReactD3.js\n
\n
\n
\n
🎨
\n
\n

Design System

\n

A comprehensive UI component library with tokens, themes, and documentation.

\n CSSFigma\n
\n
\n
\n
⚡
\n
\n

Edge Functions

\n

Serverless compute platform running at the edge for ultra-low latency.

\n RustWasm\n
\n
\n
\n
🔒
\n
\n

Vault

\n

End-to-end encrypted password manager with zero-knowledge architecture.

\n GoSecurity\n
\n
\n
\n\n', table: '\n\n\n \n\n\n
\n

User Directory

\n

Click column headers to sort. Type to filter.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Name ▲Role ▲Status ▲Joined ▲
Alice ChenEngineerActive2023-01-15
Bob MartinezDesignerActive2023-03-22
Carol DavisManagerAway2022-11-08
David KimEngineerActive2024-01-10
Eva WilsonDesignerOffline2023-07-19
Frank LopezDevOpsActive2023-09-01
Grace PatelPMAway2022-06-14
\n
7 users
\n
\n \n\n', animated: '\n\n\n \n\n\n
\n
\n
\n
\n
\n
\n

CSS Animations

\n

Pure CSS motion design with gradients, keyframes, and transforms

\n
\n
\n
\n
\n
\n
\n
\n
\n\n', minimal: '\n\n\n \n \n My Page\n \n\n\n

Hello World

\n

Start building your page here.

\n\n' }; // --- Core preview --- function getOutputHTML() { var code = editor.value; if (document.getElementById('boilerplateCheck').checked && !code.trim().toLowerCase().startsWith('\n\n\n \n \n Preview\n\n\n' + code + '\n\n'; } return code; } function runPreview() { var code = getOutputHTML(); var frame = previewFrame; var doc = frame.contentDocument || frame.contentWindow.document; doc.open(); doc.write(code); doc.close(); flashStatus(); } function flashStatus() { var s = document.getElementById('previewStatus'); s.textContent = 'Updated'; s.style.color = 'var(--accent)'; setTimeout(function(){ s.textContent = 'Live'; }, 800); } function updateCounts() { var val = editor.value; document.getElementById('charCount').textContent = val.length + ' chars'; document.getElementById('lineCount').textContent = (val === '' ? 0 : val.split('\n').length) + ' lines'; } // --- Debounced auto-refresh --- editor.addEventListener('input', function() { updateCounts(); clearTimeout(debounceTimer); debounceTimer = setTimeout(runPreview, 400); }); // --- Tab support in textarea --- editor.addEventListener('keydown', function(e) { if (e.key === 'Tab') { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.substring(0, start) + ' ' + this.value.substring(end); this.selectionStart = this.selectionEnd = start + 2; clearTimeout(debounceTimer); debounceTimer = setTimeout(runPreview, 400); updateCounts(); } }); // --- Split mode --- window.setSplit = function(mode) { currentSplit = mode; if (mode === 'vertical') { wrapper.classList.add('vertical'); document.getElementById('btnVertical').classList.add('active'); document.getElementById('btnHorizontal').classList.remove('active'); } else { wrapper.classList.remove('vertical'); document.getElementById('btnHorizontal').classList.add('active'); document.getElementById('btnVertical').classList.remove('active'); } }; // --- Mobile preview --- window.toggleMobile = function() { isMobile = !isMobile; var btn = document.getElementById('btnMobile'); if (isMobile) { previewContainer.classList.add('mobile-mode'); btn.classList.add('active'); } else { previewContainer.classList.remove('mobile-mode'); btn.classList.remove('active'); } runPreview(); }; // --- Fullscreen --- window.openFullscreen = function() { var overlay = document.getElementById('fullscreenOverlay'); overlay.classList.add('active'); var frame = document.getElementById('fullscreenFrame'); var code = getOutputHTML(); var doc = frame.contentDocument || frame.contentWindow.document; doc.open(); doc.write(code); doc.close(); }; window.closeFullscreen = function() { document.getElementById('fullscreenOverlay').classList.remove('active'); }; // --- Templates --- window.showTemplates = function() { document.getElementById('templateModal').classList.add('active'); }; window.hideTemplates = function() { document.getElementById('templateModal').classList.remove('active'); }; window.loadTemplate = function(name) { if (templates[name]) { editor.value = templates[name]; updateCounts(); runPreview(); } hideTemplates(); }; // --- Download --- window.downloadHTML = function() { var code = getOutputHTML(); var blob = new Blob([code], { type: 'text/html' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'preview.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; // --- Copy --- window.copyOutput = function() { var code = getOutputHTML(); navigator.clipboard.writeText(code).then(function(){ showToast('Copied to clipboard!'); }); }; // --- Clear --- window.clearEditor = function() { editor.value = ''; updateCounts(); runPreview(); editor.focus(); }; // --- Run (exposed globally) --- window.runPreview = runPreview; // --- Init --- setSplit('horizontal'); updateCounts(); runPreview(); // --- Track recently used --- try { var recent = JSON.parse(localStorage.getItem('recentTools') || '[]'); var tool = { name: 'HTML Live Preview', url: '/tools/html-preview' }; recent = recent.filter(function(t){ return t.url !== tool.url; }); recent.unshift(tool); if (recent.length > 10) recent = recent.slice(0, 10); localStorage.setItem('recentTools', JSON.stringify(recent)); } catch(e) {} })();
Keyboard Shortcuts
Ctrl+Enter Run preview
Ctrl+Shift+C Copy output
Ctrl+L Clear