HTML/CSS Live Editor

Write HTML and CSS, see instant live preview. Export your project as a single HTML file.

HTML 0 chars
CSS 0 chars
Live Preview ● Ready

What is the HTML/CSS Live Editor?

The HTML/CSS Live Editor is a client-side development sandbox designed to code and preview HTML structures and CSS styles in real-time. By writing markup on the left and style rules in the center, you can visually audit design layouts in an adjacent iframe sandbox.

This editor compiles and renders your styles and layouts locally inside your browser's private frame. Since no source codes, class maps, or preview contents are uploaded to database servers, your visual layouts and proprietary structures remain secure.

How to Use the HTML/CSS Live Editor

  1. Write Your HTML: Paste or type your HTML elements (such as divs, headers, and paragraphs) into the left editor panel.
  2. Apply Your CSS: Enter your CSS style declarations (like classes, variables, and animations) in the middle editor panel.
  3. Observe the Live Preview: The right panel contains a sandboxed iframe that renders your combined code instantly.
  4. Copy or Export Code: Click "Copy HTML" to copy the combined document to your clipboard, or click "Export HTML" to download a complete, styled HTML file.
  5. Reset Workspace: Click "Reset" to clear the editors and restore the default cards template.

Key Features

Common Use Cases

Frequently Asked Questions

No. 99tool.in compiles and displays your HTML and CSS code locally using sandboxed iframe elements. Your code remains private and does not leave your machine.

You can add standard HTML <link> tags or CSS @import rules inside your editors to reference external stylesheets and fonts (like Google Fonts).

Yes. The editor automatically caches your active code blocks in LocalStorage. Refreshing the browser or switching tabs will not lose your configurations.

Yes. Clicking "Export HTML" builds a single standalone file containing your HTML layout with your CSS code embedded inside a head <style> block.

🔒 Privacy & Data Note: Live previews, code compilations, and HTML exports are processed locally in your browser. No files are uploaded to our servers.

${htmlArea.value} `; } function updatePreview() { try { previewFrame.srcdoc = buildPreviewDoc(); updateStatus.textContent = '● Synced'; updateStatus.style.color = '#28a745'; localStorage.setItem('99tool_live_html', htmlArea.value); localStorage.setItem('99tool_live_css', cssArea.value); } catch (e) { updateStatus.textContent = '● Error'; updateStatus.style.color = '#dc3545'; } htmlCount.textContent = ((window.i18n && window.i18n.formatNumber) ? window.i18n.formatNumber(htmlArea.value.length, 0) : htmlArea.value.length) + ' chars'; cssCount.textContent = ((window.i18n && window.i18n.formatNumber) ? window.i18n.formatNumber(cssArea.value.length, 0) : cssArea.value.length) + ' chars'; } let debounceTimer; function debouncedUpdate() { updateStatus.textContent = '● Compiling...'; updateStatus.style.color = '#ffc107'; clearTimeout(debounceTimer); debounceTimer = setTimeout(updatePreview, 300); } htmlArea.addEventListener('input', debouncedUpdate); cssArea.addEventListener('input', debouncedUpdate); copyBtn.addEventListener('click', () => { const text = buildPreviewDoc(); navigator.clipboard.writeText(text).then(() => { copyBtn.textContent = 'Copied!'; setTimeout(() => { copyBtn.textContent = 'Copy HTML'; }, 1800); }).catch(() => { alert('Copy failed. Try selecting manually.'); }); }); exportBtn.addEventListener('click', () => { const fullHtml = ` My Project ${htmlArea.value} `; const blob = new Blob([fullHtml], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'my-project.html'; a.click(); URL.revokeObjectURL(url); }); resetBtn.addEventListener('click', () => { if (confirm('Reset all code to defaults? This will erase your current work.')) { htmlArea.value = `

Hello 99tool!

Start editing HTML on the left and CSS in the middle to see live preview on the right.

`; cssArea.value = `body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 100vh; margin: 0; background: #f0f0f0; } .card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 500px; text-align: center; } .card h1 { color: #e53935; margin-bottom: 0.5rem; } .card p { color: #555; line-height: 1.6; }`; updatePreview(); } }); window.addEventListener('load', () => { const savedHtml = localStorage.getItem('99tool_live_html'); const savedCss = localStorage.getItem('99tool_live_css'); if (savedHtml) htmlArea.value = savedHtml; if (savedCss) cssArea.value = savedCss; updatePreview(); });