Online, Live Code Editor

Live, Online Code Editor

Compile HTML, CSS and JavaScript on the web

<!--predefined html, but editable--> <div class="circle"> click me! </div>
/*predefined CSS, but editable*/ .circle { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 50%; background: crimson; margin: auto; margin-top: 50px; transition-duration: 300ms; }
//predefined JavaScript, but editable var circle = document.querySelector(".circle"); var bool = false; circle.addEventListener('click', function() { if (!bool) { circle.style.background = "coral"; bool = true; } else { circle.style.background = "crimson"; bool = false; } });

This code editor uses Ace for syntax highlighting and other text editing features. Addition or changes to the code is compiled on the fly when the result tab is clicked.

" ); result.close(); } var allButtons = document.querySelectorAll("#button-wrapper button"); var allPanels = document.querySelectorAll("#ide-container .panel-wrapper"); function switchPanel(panelIndex) { switcher(panelIndex); } switchPanel(0); function runEdit(panelIndex) { switcher(panelIndex); compiler(); } function switcher(panelIndex) { allButtons.forEach(function (node) { node.style.background = ""; }); allButtons[panelIndex].style.background = "#002240"; allPanels.forEach(function (node) { node.style.display = "none"; }); allPanels[panelIndex].style.display = "block"; }