How to make Live Coding Editor using HTML CSS and JavaScript ?
Last Updated :
23 Jul, 2024
Improve
In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.
Final Output
Prerequisite
Approach
- Begin by defining the HTML, CSS, and JavaScript files in your project.
- Create the HTML structure to build the user interface, including text areas, buttons, and iframes. Use HTML elements such as <textarea>, <button>, and <iframe>.
- Apply CSS styles to the HTML elements for a visually appealing and user-friendly interface. Define fonts, colors, and layouts to enhance the appearance of the editor.
- In JavaScript, we created a function to read the HTML CSS JS code, and to convert it into UI, and will display it in Iframe Tag.
Example: This example illustrates the creation of a Live Coding Editor project using HTML CSS & JavaScript.
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Live Coding Editor</title>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<div id="editor">
<div class="code-section">
<label for="htmlCode">
HTML Code:
</label>
<textarea id="htmlCode"
class="code"
placeholder=
"Enter HTML code here">
</textarea>
</div>
<div class="code-section">
<label for="cssCode">
CSS Code:
</label>
<textarea id="cssCode"
class="code"
placeholder=
"Enter CSS code here">
</textarea>
</div>
<div class="code-section">
<label for="jsCode">
JavaScript Code:
</label>
<textarea id="jsCode"
class="code"
placeholder=
"Enter JavaScript code here">
</textarea>
</div>
<div class="code-section">
<label for="output">
Output:
</label>
<div id="output"
class="code">
</div>
</div>
<div id="menu">
<button id="runButton">
Run Code
</button>
<button id="clearButton">
Clear Code
</button>
<a id="downloadButton"
download="code.zip">
Download Code
</a>
</div>
</div>
<iframe id="preview"></iframe>
<script src="script.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js">
</script>
</body>
</html>
/* Style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
#editor {
display: flex;
flex-direction: column;
height: 100vh;
padding: 10px;
}
label {
font-weight: bold;
color: #007acc;
}
.code-section {
margin-bottom: 20px;
}
#htmlCode,
#cssCode {
background-color: #fff;
}
.code {
width: 100%;
height: 200px;
padding: 10px;
border: none;
resize: none;
font-family: "Courier New",
monospace;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 5px 10px;
background-color: #007acc;
color: #fff;
border: none;
cursor: pointer;
margin-right: 10px;
}
#downloadButton {
text-decoration: none;
background-color: #007acc;
color: #fff;
padding: 5px 10px;
margin-right: 10px;
}
iframe {
width: 100%;
height: calc(100% - 320px);
border: none;
}
#htmlCode::placeholder,
#cssCode::placeholder,
#jsCode::placeholder {
color: hsl(113, 100%, 49%);
}
/* Styles for responsive UI */
@media (max-width: 768px) {
.code-section {
width: 100%;
margin: 10px 0;
}
.code {
width: 100%;
}
}
/* Style for scrollable output box */
#output {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
max-height: 300px;
}
// Script.js
const htmlCode =
document.getElementById('htmlCode');
const cssCode =
document.getElementById('cssCode');
const jsCode =
document.getElementById('jsCode');
const output =
document.getElementById('output')
const previewFrame =
document.getElementById('preview');
const runButton =
document.getElementById('runButton');
const clearButton =
document.getElementById('clearButton');
const downloadButton =
document.getElementById('downloadButton');
const updatePreview = () => {
const html = htmlCode.value;
const css =
`<style>${cssCode.value}</style>`;
const js =
`<script>${jsCode.value}</script>`;
const code = `${html}\n${css}\n${js}`;
output.innerHTML = code;}
const clearCode=() => {
htmlCode.value = '';
cssCode.value = '';
jsCode.value = '';
updatePreview()}
const downloadCode = () => {
const zip = new JSZip();
zip.file("index.html", htmlCode.value);
zip.file("styles.css", cssCode.value);
zip.file("script.js", jsCode.value);
zip.generateAsync({ type: "blob" }).
then(function (content) {
saveAs(content, "code.zip");
})}
// Initial preview update
updatePreview();
downloadButton.addEventListener('click', () => {
const zip = new JSZip();
zip.file("index.html", htmlCode.value);
zip.file("styles.css", cssCode.value);
zip.file("script.js", jsCode.value);
zip.generateAsync({ type: "blob" })
.then( (content)=> {
saveAs(content, "code.zip");
})});
runButton.addEventListener('click', updatePreview);
clearButton.addEventListener('click', clearCode);
downloadButton.addEventListener('click', downloadCode);
Output