HTML Previewer

Live HTML Previewer

Write HTML and CSS code on the left and see the live result on the right.

Code Editor

<label>Live Preview</label>
            <div class="preview-window">
                <iframe id="livePreview"></iframe>
            </div>
        </div>
    </div>

<div class="bottom-actions">
        <button onclick="copyRawCode()" class="btn-main"><i class="fa-solid fa-copy"></i> Copy Code</button>
        <button onclick="resetPreviewer()" class="btn-alt">Clear All</button>
    </div>
</div>

function copyRawCode() {
    const el = document.getElementById('htmlCode');
    if(!el.value) return;
    el.select();
    document.execCommand('copy');
    alert("Code copied to clipboard!");
}

function resetPreviewer() {
    document.getElementById('htmlCode').value = '';
    updatePreview();
}

// Initialize with a blank frame
window.onload = updatePreview;
</script>

.tool-header { text-align: center; margin-bottom: 30px; }
.tool-header i { font-size: 45px; color: #0073aa; margin-bottom: 15px; }

.editor-container { display: flex; gap: 20px; margin-bottom: 25px; height: 500px; }
.editor-pane, .preview-pane { flex: 1; display: flex; flex-direction: column; }
label { font-weight: 700; margin-bottom: 10px; color: #475569; font-size: 14px; }

#htmlCode {
    flex: 1; padding: 15px; border: 2px solid #e2e8f0; border-radius: 12px;
    font-family: 'Courier New', monospace; font-size: 14px; outline: none;
    background: #1e293b; color: #f8fafc; resize: none;
}

.preview-window {
    flex: 1; border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden;
    background: white;
}

#livePreview { width: 100%; height: 100%; border: none; }

.bottom-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 25px; border-top: 1px solid #f1f5f9; }
.btn-main { background: #0073aa; color: white; border: none; padding: 12px 25px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.btn-alt { background: none; border: none; color: #94a3b8; font-weight: 600; cursor: pointer; }

@media (max-width: 850px) {
    .editor-container { flex-direction: column; height: auto; }
    #htmlCode, .preview-window { height: 300px; }
}
</style>

</div>

</article>

</main>
			
		
	</div>

</div> 
	</div>
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2026  | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer>
	</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<style>
/* ══════════════════════════════════════════
   EDITERA FOOTER — Redesigned Dark Tech
══════════════════════════════════════════ */

.editera-footer {
    background: #030810;
    color: #64748b;
    padding: 80px 32px 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

/* Top cyan glow line */
.editera-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.6), transparent);
}

/* Background grid */
.editera-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.footer-orb-left {
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,0.05) 0%, transparent 70%);
    bottom: -100px; left: -100px;
    filter: blur(60px);
    pointer-events: none; z-index: 0;
}

.footer-orb-right {
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
    top: -80px; right: -80px;
    filter: blur(60px);
    pointer-events: none; z-index: 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── TOP GRID ── */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ── Brand ── */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oxanium', monospace;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-decoration: none;
}

.footer-logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #00e5ff, #7c3aed);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #000;
    flex-shrink: 0;
}

.footer-logo-text span { color: #00e5ff; }

.footer-brand p {
    font-size: 14px;
    line-height: 1.8;
    color: #475569;
    max-width: 280px;
    margin-bottom: 28px;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.footer-socials a {
    width: 38px; height: 38px;
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #475569;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgba(255,255,255,0.02);
}

.footer-socials a:hover {
    border-color: #00e5ff;
    color: #00e5ff;
    background: rgba(0,229,255,0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,229,255,0.15);
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,255,157,0.06);
    border: 1px solid rgba(0,255,157,0.15);
    border-radius: 50px;
    padding: 5px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #00ff9d;
    letter-spacing: 0.5px;
}

.footer-badge::before {
    content: '';
    width: 6px; height: 6px;
    background: #00ff9d;
    border-radius: 50%;
    animation: fblink 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes fblink {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

/* ── Columns ── */
.footer-col h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col:nth-child(2) h4 { color: #00e5ff; }
.footer-col:nth-child(3) h4 { color: #a78bfa; }
.footer-col:nth-child(4) h4 { color: #ffd32a; }

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }

.footer-col a {
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-col a::before {
    content: '›';
    font-size: 16px; line-height: 1;
    color: rgba(255,255,255,0.08);
    transition: all 0.2s;
    flex-shrink: 0;
}

.footer-col:nth-child(2) a:hover { color: #00e5ff; }
.footer-col:nth-child(3) a:hover { color: #a78bfa; }
.footer-col:nth-child(4) a:hover { color: #ffd32a; }

.footer-col a:hover { padding-left: 3px; }
.footer-col:nth-child(2) a:hover::before { color: #00e5ff; }
.footer-col:nth-child(3) a:hover::before { color: #a78bfa; }
.footer-col:nth-child(4) a:hover::before { color: #ffd32a; }

/* ── STATS ROW ── */
.footer-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(0,229,255,0.06);
    border: 1px solid rgba(0,229,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    margin: 44px 0;
}

.footer-stat {
    background: #030810;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: background 0.2s;
}

.footer-stat:hover { background: rgba(0,229,255,0.03); }

.footer-stat-num {
    font-family: 'Oxanium', monospace;
    font-size: 28px;
    font-weight: 800;
    color: #00e5ff;
    line-height: 1;
}

.footer-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #334155;
}

/* ── BOTTOM BAR ── */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 20px 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative; z-index: 1;
}

.footer-bottom p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #334155;
}

.footer-bottom a { color: #00e5ff; text-decoration: none; }

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-bottom-links {
    display: flex;
    gap: 16px;
}

.footer-bottom-links a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #334155;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.footer-bottom-links a:hover { color: #00e5ff; }

.security {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #334155;
    letter-spacing: 0.5px;
}

.security i { color: #00ff9d; font-size: 13px; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .editera-footer { padding: 56px 20px 0; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-stats { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-right { flex-direction: column; gap: 10px; }
}
</style>

<div class="footer-brand">
                <div class="footer-logo">
                    <span class="footer-logo-icon"><i class="fa-solid fa-bolt"></i></span>
                    <span class="footer-logo-text">Edit<span>Era</span></span>
                </div>
                <p>Your ultimate destination for free, fast, and secure online tools. No signup. No limits. Ever.</p>
                <div class="footer-socials">
                    <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
                    <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" title="YouTube"><i class="fab fa-youtube"></i></a>
                </div>
                <div class="footer-badge">94 Tools Live & Free</div>
            </div>

<div class="footer-col">
                <h4><i class="fa-solid fa-bolt"></i> Tools</h4>
                <ul>
                    <li><a href="/qr-generator">QR Generator</a></li>
                    <li><a href="/word-counter">Word Counter</a></li>
                    <li><a href="/json-formatter">JSON Formatter</a></li>
                    <li><a href="/pdf-to-word">PDF to Word</a></li>
                    <li><a href="/image-resizer">Image Resizer</a></li>
                    <li><a href="/password-generator">Password Gen</a></li>
                </ul>
            </div>

<div class="footer-col">
                <h4><i class="fa-solid fa-grid-2"></i> Categories</h4>
                <ul>
                    <li><a href="#">PDF Master Suite</a></li>
                    <li><a href="#">Text & Content</a></li>
                    <li><a href="#">Developer Utilities</a></li>
                    <li><a href="#">Smart Generators</a></li>
                    <li><a href="#">Calculators</a></li>
                    <li><a href="#">More Utilities</a></li>
                </ul>
            </div>

<div class="footer-col">
                <h4><i class="fa-solid fa-building"></i> Company</h4>
                <ul>
                    <li><a href="/about">About Us</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Sitemap</a></li>
                </ul>
            </div>

</div>

<div class="footer-stats">
            <div class="footer-stat">
                <span class="footer-stat-num">94</span>
                <span class="footer-stat-label">Total Tools</span>
            </div>
            <div class="footer-stat">
                <span class="footer-stat-num">100%</span>
                <span class="footer-stat-label">Free Forever</span>
            </div>
            <div class="footer-stat">
                <span class="footer-stat-num">6</span>
                <span class="footer-stat-label">Categories</span>
            </div>
            <div class="footer-stat">
                <span class="footer-stat-num">0</span>
                <span class="footer-stat-label">Signup Required</span>
            </div>
        </div>

<div class="footer-bottom">
            <p>© 2026 <a href="/">EditEra.in</a>. All rights reserved.</p>
            <div class="footer-bottom-right">
                <div class="footer-bottom-links">
                    <a href="#">Privacy</a>
                    <a href="#">Terms</a>
                    <a href="#">Contact</a>
                </div>
                <div class="security">
                    <i class="fa-solid fa-shield-check"></i> SSL Encrypted
                </div>
            </div>
        </div>

</div>
</footer>
<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">Scroll to Top</span>
</div>
			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
			<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""};
//# sourceURL=astra-theme-js-js-extra
</script>
<script src="https://www.editera.in/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.12.3" id="astra-theme-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.editera.in/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://www.editera.in/wp-includes/js/wp-emoji-loader.min.js
</script>
	</body>
</html>