Tailwind Play Clone

New File Download Toggle Theme

HTML

CSS

JavaScript

Preview

Console

${html} `; const iframe = previewFrame; iframe.srcdoc = template; }, 300); // Event listeners for editors [htmlEditor, cssEditor, jsEditor].forEach(editor => { editor.addEventListener('input', updatePreview); }); // Error handling window.addEventListener('message', (event) => { if (event.data.type === 'error') { errorConsole.innerHTML += ``; errorConsole.scrollTop = errorConsole.scrollHeight; } }); // Local Storage function saveToLocalStorage() { const editorContent = { html: htmlEditor.value, css: cssEditor.value, js: jsEditor.value }; localStorage.setItem('editorContent', JSON.stringify(editorContent)); } // Load from localStorage const savedContent = localStorage.getItem('editorContent'); if (savedContent) { const content = JSON.parse(savedContent); htmlEditor.value = content.html; cssEditor.value = content.css; jsEditor.value = content.js; updatePreview(); } // Auto-save [htmlEditor, cssEditor, jsEditor].forEach(editor => { editor.addEventListener('input', debounce(saveToLocalStorage, 1000)); }); // New File document.getElementById('newFileBtn').addEventListener('click', () => { if (confirm('Are you sure you want to create a new file? All unsaved changes will be lost.')) { htmlEditor.value = ''; cssEditor.value = ''; jsEditor.value = ''; errorConsole.innerHTML = ''; localStorage.removeItem('editorContent'); updatePreview(); } }); // Download Project document.getElementById('downloadBtn').addEventListener('click', () => { const zip = new JSZip(); zip.file('index.html', htmlEditor.value); zip.file('styles.css', cssEditor.value); zip.file('script.js', jsEditor.value); zip.generateAsync({type: 'blob'}).then(function(content) { const url = window.URL.createObjectURL(content); const a = document.createElement('a'); a.href = url; a.download = 'project.zip'; document.body.appendChild(a); a.click(); a.remove(); }); });