Advanced Code Viewer - FileConvertly | Live HTML CSS JS Editor

Advanced Code Viewer

Write and preview HTML, CSS, and JavaScript code in real-time.

Code Editor

Write HTML, CSS, and JavaScript code below to see a live preview

Live Preview

How to Use Advanced Code Viewer

Step 1: Write Code

Enter your HTML, CSS, and JavaScript code in the respective editors.

Step 2: Preview Code

Click "Preview" to see your code rendered in real-time.

Step 3: Save Code

Click "Save" to store your code for later use.

Step 4: Reset

Click "Reset" to clear all code inputs and the preview.

`;this.previewFrame.srcdoc = previewContent; this.previewSection.style.display = 'block'; this.showToast('Preview Updated', 'success', 'Code preview refreshed successfully'); }saveCode() { const html = this.htmlInput.value.trim(); const css = this.cssInput.value.trim(); const js = this.jsInput.value.trim();if (!html && !css && !js) { this.showToast('Empty Input', 'error', 'Please enter some code to save'); return; }const codeData = { html, css, js }; localStorage.setItem('code-viewer-content', JSON.stringify(codeData)); this.showToast('Code Saved', 'success', 'Your code has been saved'); }reset() { this.htmlInput.value = ''; this.cssInput.value = ''; this.jsInput.value = ''; this.previewFrame.srcdoc = ''; this.previewSection.style.display = 'none'; localStorage.removeItem('code-viewer-content'); this.showToast('Reset Complete', 'success', 'Code editor reset'); }toggleTheme() { document.body.classList.toggle('dark'); const isDark = document.body.classList.contains('dark'); this.themeToggle.innerHTML = isDark ? '' : ''; localStorage.setItem('fileconvertly-theme', isDark ? 'dark' : 'light'); }showToast(title, type, message = '') { const icons = { success: 'fas fa-check-circle', error: 'fas fa-exclamation-circle', warning: 'fas fa-exclamation-triangle' }; this.toast.className = `toast ${type}`; this.toast.innerHTML = `
${title}
${message}
`; this.toast.classList.add('show'); setTimeout(() => { this.toast.classList.remove('show'); }, 3000); } }// Initialize the code viewer when the DOM is loaded document.addEventListener('DOMContentLoaded', () => { const codeViewer = new CodeViewer(); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.animation = 'fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards'; observer.unobserve(entry.target); } }); }, observerOptions); document.querySelectorAll('.editor-card, .preview-section, .how-to-use').forEach(el => { const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom > 0) { el.style.animation = 'fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards'; } else { observer.observe(el); } }); });