Online HTML, CSS, JavaScript Editor (Compiler)

index.html

style.css

script.js

Output

\n", language: "html", theme: "vs-light", fontSize: 16, scrollBeyondLastLine: false, scrollbar: { vertical: 'hidden', horizontal: 'hidden' }, overviewRulerLanes: 0, wordWrap: 'on', automaticLayout: true, lineNumbers: isMobileDevice() ? "off" : "on", minimap: { enabled: false } }); cssEditor = monaco.editor.create(document.getElementById("css-editor"), { value: "body { font-family: Arial, sans-serif; }", language: "css", theme: "vs-light", fontSize: 16, scrollBeyondLastLine: false, scrollbar: { vertical: 'hidden', horizontal: 'hidden' }, overviewRulerLanes: 0, wordWrap: 'on', automaticLayout: true, lineNumbers: isMobileDevice() ? "off" : "on", minimap: { enabled: false } }); jsEditor = monaco.editor.create(document.getElementById("js-editor"), { value: "console.log('Hello, World!');", language: "javascript", theme: "vs-light", fontSize: 16, scrollBeyondLastLine: false, scrollbar: { vertical: 'hidden', horizontal: 'hidden' }, overviewRulerLanes: 0, wordWrap: 'on', automaticLayout: true, lineNumbers: isMobileDevice() ? "off" : "on", minimap: { enabled: false } }); }); if (isMobileDevice()) { document.getElementById("editor").style.height = `${window.innerHeight}px`; } function switchEditor(type) { document.querySelectorAll('.editor').forEach(editor => editor.classList.remove('active')); document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active')); document.getElementById(`${type}-editor`).classList.add('active'); document.querySelector(`.tab[onclick="switchEditor('${type}')"]`).classList.add('active'); } function runCode() { const html = htmlEditor.getValue(); const css = ``; const js = `