Free Code Compiler
Online Code Compiler – Run and preview HTML, CSS, and JavaScript instantly in one place. Write, edit, and test your web code with real-time live preview. A fast, free, and user-friendly coding playground for beginners and developers.
Code Compiler
HTML
CSS
JavaScript
Preview
Console cleared
';
},toggleConsole() {
this.isConsoleVisible = !this.isConsoleVisible;
if (this.isConsoleVisible) {
this.consolePanel.classList.remove('hidden');
} else {
this.consolePanel.classList.add('hidden');
}
},toggleFullscreenPreview() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
this.previewFrame.requestFullscreen();
}
},activateMobilePane(pane) {
// Update mobile nav buttons
this.mobileNavButtons.forEach(btn => {
if (btn.getAttribute('data-pane') === pane) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// Show the selected pane
document.querySelectorAll('.pane-container').forEach(container => {
if (container.getAttribute('data-pane') === pane) {
container.classList.add('active-pane');
} else {
container.classList.remove('active-pane');
}
});
},toggleSettingsMenu() {
this.settingsMenu.classList.toggle('open');
},handleSettingsAction(action) {
switch(action) {
case 'theme':
this.toggleTheme();
break;
case 'layout':
this.toggleLayout();
break;
case 'import':
this.importProject();
break;
case 'export':
this.exportProject();
break;
case 'clear':
this.clearAll();
break;
}
},toggleTheme() {
this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.classList.toggle('light-theme');
this.editorTheme.textContent = this.currentTheme === 'dark' ? 'Dark' : 'Light';
this.showStatus(`Theme changed to ${this.currentTheme}`);
},toggleLayout() {
this.layout = this.layout === 'horizontal' ? 'vertical' : 'horizontal';
// This would require reinitializing Split.js with different options
this.showStatus(`Layout changed to ${this.layout}`);
},formatCode(type) {
try {
let formatted;
if (type === 'html') {
formatted = html_beautify(this.editors.html.value, {
indent_size: 2,
indent_char: ' ',
max_preserve_newlines: 1,
preserve_newlines: true,
wrap_line_length: 80
});
this.editors.html.value = formatted;
} else if (type === 'css') {
formatted = css_beautify(this.editors.css.value, {
indent_size: 2,
indent_char: ' ',
selector_separator_newline: true
});
this.editors.css.value = formatted;
} else if (type === 'js') {
formatted = js_beautify(this.editors.js.value, {
indent_size: 2,
indent_char: ' ',
preserve_newlines: true
});
this.editors.js.value = formatted;
}
this.showStatus(`${type.toUpperCase()} formatted successfully`);
this.updatePreview();
} catch (error) {
this.showStatus(`Error formatting ${type.toUpperCase()}: ${error.message}`, 5000);
}
},clearEditor(type) {
if (confirm(`Are you sure you want to clear the ${type.toUpperCase()} editor?`)) {
this.editors[type].value = '';
this.showStatus(`${type.toUpperCase()} editor cleared`);
this.updatePreview();
}
},saveToLocalStorage() {
const project = {
html: this.editors.html.value,
css: this.editors.css.value,
js: this.editors.js.value,
timestamp: new Date().getTime()
};
localStorage.setItem('neoncode-project', JSON.stringify(project));
this.lastSave = project.timestamp;
},loadFromLocalStorage() {
const saved = localStorage.getItem('neoncode-project');
if (saved) {
try {
const project = JSON.parse(saved);
this.editors.html.value = project.html || '';
this.editors.css.value = project.css || '';
this.editors.js.value = project.js || '';
this.lastSave = project.timestamp;
this.showStatus('Project loaded from local storage');
} catch (e) {
console.error('Error loading from local storage:', e);
}
}
},setupAutosave() {
// Autosave every 30 seconds
this.autosaveInterval = setInterval(() => {
if (this.isAutosaveEnabled) {
this.saveToLocalStorage();
}
}, 30000);
},exportProject() {
const zip = new JSZip();
// Add files to zip
zip.file("index.html", this.editors.html.value);
zip.file("styles.css", this.editors.css.value);
zip.file("script.js", this.editors.js.value);
// Generate zip file
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "neoncode-project.zip");
});
this.showStatus('Project exported as ZIP');
},importProject() {
// Create file input element
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.zip,.html,.css,.js';
fileInput.onchange = (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
if (file.name.endsWith('.zip')) {
// Handle ZIP import
JSZip.loadAsync(content).then(zip => {
const promises = [];
if (zip.file('index.html')) {
promises.push(zip.file('index.html').async('string').then(html => {
this.editors.html.value = html;
}));
}
if (zip.file('styles.css')) {
promises.push(zip.file('styles.css').async('string').then(css => {
this.editors.css.value = css;
}));
}
if (zip.file('script.js')) {
promises.push(zip.file('script.js').async('string').then(js => {
this.editors.js.value = js;
}));
}
Promise.all(promises).then(() => {
this.updatePreview();
this.showStatus('Project imported from ZIP');
});
});
} else if (file.name.endsWith('.html')) {
this.editors.html.value = content;
this.showStatus('HTML file imported');
} else if (file.name.endsWith('.css')) {
this.editors.css.value = content;
this.showStatus('CSS file imported');
} else if (file.name.endsWith('.js')) {
this.editors.js.value = content;
this.showStatus('JS file imported');
}
this.updatePreview();
};
reader.readAsText(file);
};
fileInput.click();
},clearAll() {
if (confirm('Are you sure you want to clear all editors?')) {
this.editors.html.value = '';
this.editors.css.value = '';
this.editors.js.value = '';
this.updatePreview();
this.showStatus('All editors cleared');
}
},updateCursorPosition(editor) {
const cursorPos = this.getCursorPosition(editor);
this.cursorPosition.textContent = `Ln ${cursorPos.line}, Col ${cursorPos.column}`;
},getCursorPosition(editor) {
// For textarea, we can calculate line and column from selection
const cursorPosition = editor.selectionStart;
const text = editor.value.substring(0, cursorPosition);
const lines = text.split('\n');
return {
line: lines.length,
column: lines[lines.length - 1].length + 1
};
},showStatus(message, duration = 3000) {
// Create status message element if it doesn't exist
let statusEl = document.getElementById('status-message');
if (!statusEl) {
statusEl = document.createElement('div');
statusEl.id = 'status-message';
statusEl.style.position = 'fixed';
statusEl.style.bottom = '70px';
statusEl.style.left = '50%';
statusEl.style.transform = 'translateX(-50%)';
statusEl.style.backgroundColor = 'var(--accent-primary)';
statusEl.style.color = 'white';
statusEl.style.padding = '8px 16px';
statusEl.style.borderRadius = 'var(--border-radius)';
statusEl.style.zIndex = '10000';
statusEl.style.boxShadow = 'var(--shadow-accent)';
statusEl.style.fontSize = '0.875rem';
document.body.appendChild(statusEl);
}
statusEl.textContent = message;
statusEl.style.display = 'block';
// Hide after duration
setTimeout(() => {
statusEl.style.display = 'none';
}, duration);
},debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
};// Initialize the app
app.init();// Make app available globally for debugging
window.neonCode = app;
});