-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patheditor.html
More file actions
1 lines (1 loc) · 11.4 KB
/
editor.html
File metadata and controls
1 lines (1 loc) · 11.4 KB
1
<!DOCTYPE html><html lang="en" data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"><meta name="google-site-verification" content="ZWidhp29xotLZ2B8B4mHHEtWvixWj6HhA9Uaav06BYA" /><meta name="google-adsense-account" content="ca-pub-1607055557776596"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1607055557776596" crossorigin="anonymous" onerror="window.adSenseBlocked = true;"></script><title>Live HTML Editor | Free Real Time Code Preview</title><meta name="description" content="Use our free Live HTML Editor to write, test, and instantly preview HTML, CSS, and JS code in real time. Fast, secure, and perfect for developers."><meta name="author" content="Nothing Space"><link rel="canonical" href="https://nothingtools.github.io/editor.html" /><meta property="og:site_name" content="Nothing Space"><meta property="og:type" content="website"><meta property="og:title" content="Live HTML Editor | Real Time Code Preview"><meta property="og:description" content="Test HTML in real time. Instantly preview your HTML, CSS, and JavaScript online."><meta property="og:image" content="https://nothingtools.github.io/banner.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Live HTML Editor by Nothing Space"><meta name="twitter:description" content="Test HTML in real time. Beautify and preview code instantly without servers."><meta name="twitter:image" content="https://nothingtools.github.io/banner.png"><link rel="icon" type="image/svg+xml" href="./icon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><script> let savedTheme = localStorage.getItem("theme"), sysTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; document.documentElement.setAttribute("data-theme", savedTheme || sysTheme); </script><style> :root { --bg: #000000; --surface: #0a0a0a; --text: #ededed; --text-muted: #888888; --border: #222222; --accent: #ff3c00; --code-color: #79c0ff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, sans-serif; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } .top-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } .nav-brand { font-size: 1.2rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; } .nav-brand span { color: var(--text-muted); font-weight: 400; font-size: 0.9rem; } .actions { display: flex; gap: 10px; align-items: center; } .btn { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 6px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .btn:hover { color: var(--text); border-color: #555; } #save-status { color: #3fb950; font-size: 0.8rem; font-weight: 500; display: none; margin-right: 10px; } .workspace { width: 100%; height: 65vh; min-height: 500px; display: flex; border-bottom: 1px solid var(--border); } .pane { flex: 1; display: flex; flex-direction: column; position: relative; } .pane.code-pane { border-right: 1px solid var(--border); background: var(--surface); } .pane.preview-pane { background: #ffffff; } .pane-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--border); background: var(--bg); } .preview-pane .pane-header { background: #f5f5f5; border-bottom: 1px solid #ddd; } .pane-title { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } .preview-pane .pane-title { color: #555; } textarea { flex: 1; width: 100%; background: transparent; color: var(--code-color); font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; padding: 24px; border: none; resize: none; outline: none; } iframe { flex: 1; width: 100%; height: 100%; border: none; background: #ffffff; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .ad-container { width: 100%; max-width: 1400px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ad-slot { background: var(--surface); border-radius: 8px; height: 100px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .seo-wrapper { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px; } .seo-wrapper h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; color: var(--text); } .seo-content { color: #999; font-size: 1rem; line-height: 1.7; } .seo-content h2 { color: var(--text); font-size: 1.3rem; font-weight: 600; margin: 30px 0 15px; } .seo-content ul { margin-left: 20px; margin-bottom: 20px; } .seo-content li { margin-bottom: 8px; } footer { padding: 40px 20px; text-align: center; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border); width: 100%; } @media (max-width: 900px) { .ad-container { grid-template-columns: 1fr; gap: 15px; } .workspace { flex-direction: column; height: 80vh; border: none; } .pane { height: 50%; border-bottom: 1px solid var(--border); } .pane.code-pane { border-right: none; } } </style></head><body><div class="top-nav"><div class="nav-brand">Live HTML Editor <span>| Nothing Space</span></div><div class="actions"><span id="save-status"><i class="fa-solid fa-check"></i></span><button class="btn" onclick="clearCode()"><i class="fa-solid fa-eraser"></i> Clear</button><button class="btn" id="copy-btn" onclick="copyCode()"><i class="fa-regular fa-copy"></i> Copy</button></div></div><div class="workspace"><div class="pane code-pane"><div class="pane-header"><div class="pane-title"><i class="fa-solid fa-code"></i> Source Code</div></div><textarea id="code-editor" spellcheck="false"></textarea></div><div class="pane preview-pane"><div class="pane-header"><div class="pane-title"><i class="fa-solid fa-bolt"></i> Output</div></div><iframe id="live-preview"></iframe></div></div><div class="ad-container"><div class="ad-slot"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:90px" data-ad-client="ca-pub-1607055557776596" data-ad-slot="2186545443"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="ad-slot"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:90px" data-ad-client="ca-pub-1607055557776596" data-ad-slot="2186545443"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="ad-slot"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:90px" data-ad-client="ca-pub-1607055557776596" data-ad-slot="2186545443"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div><div class="seo-wrapper"><h1>Real Time HTML Editor</h1><div class="seo-content"><p>Real Time HTML Editor helps developers test HTML in real time which saves time and improves productivity. With the advancements in technology, the need for real time html editors is increasing. They help to make web-development fluid and interactive - with no need to wait for a webpage to load.</p><p>A live html editor comes with a broad range of advantages. It has the potential to create a better user experience which can be very beneficial for businesses that are trying to increase their online presence. Along with HTML preview, it also helps to clean a HTML string/file and make it human readable.</p><h2>What can you do with Real time HTML editor?</h2><ul><li>This Real Time HTML tool shows html code's output in real time.</li><li>Users can also test real time HTML File by uploading the code.</li><li>Developer can fix any errors with tags as this tool acts as a sandbox.</li><li>It helps to save and structure HTML code content in real time.</li><li>This HTML Live tool online helps to show the HTML content and beautify HTML code.</li><li>RealTime HTML Editor works well on Windows, MAC, Linux, Chrome, Firefox, Edge, and Safari.</li></ul><h2>How does Real Time HTML Editor tool work?</h2><p>This HTML tool uses JavaScript libraries to read HTML tags and preview HTML codes. Just Paste your HTML and it renders automatically. This tool does not send html code to any server. It is completely client-side, ensuring your data remains local and secure.</p></div></div><footer> Nothing Space © 2026 | Built for Developers. </footer><script> const editor = document.getElementById('code-editor'); const preview = document.getElementById('live-preview'); const saveStatus = document.getElementById('save-status'); const copyBtn = document.getElementById('copy-btn'); const defaultCode = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 40px 20px; background: #ffffff; color: #222; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100vh; margin: 0; } h2 { color: #ff3c00; margin-top: 10px; letter-spacing: -0.5px; font-size: 2rem; } #message { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px auto; max-width: 500px; border: 1px dashed #ccc; font-size: 1rem; color: #555; line-height: 1.6; } </style></head><body><h2>Welcome to Nothing Space 🚀</h2><div id="message"></div><script> document.getElementById('message').innerHTML = '<strong>Edit code left, see the result right</strong><br><br>This is a real-time HTML editor. Try changing the code above!'; <\/script></body></html>`; editor.value = localStorage.getItem('ns_code_saved') || defaultCode; function updatePreview() { const code = editor.value; const previewDoc = preview.contentDocument || preview.contentWindow.document; previewDoc.open(); previewDoc.write(code); previewDoc.close(); localStorage.setItem('ns_code_saved', code); saveStatus.style.display = 'inline-block'; setTimeout(() => { saveStatus.style.display = 'none'; }, 1000); } editor.addEventListener('keyup', updatePreview); editor.addEventListener('keydown', function(e) { if (e.key == 'Tab') { e.preventDefault(); let start = this.selectionStart; let end = this.selectionEnd; this.value = this.value.substring(0, start) + " " + this.value.substring(end); this.selectionStart = this.selectionEnd = start + 2; } }); updatePreview(); function clearCode() { if(confirm("Clear the workspace?")) { editor.value = ""; updatePreview(); } } function copyCode() { editor.select(); document.execCommand("copy"); let origHtml = copyBtn.innerHTML; copyBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied'; copyBtn.style.color = "#fff"; copyBtn.style.borderColor = "#fff"; setTimeout(() => { copyBtn.innerHTML = origHtml; copyBtn.style.color = ""; copyBtn.style.borderColor = ""; editor.blur(); }, 2000); } </script></body></html>