Live code editors have revolutionised the way we write and debug code. These tools allow developers to write, test, and debug code in real-time, without the need to constantly save and refresh the page. In this blog, we will explore how to create a simple live code editor using HTML, CSS, and JavaScript, and provide the source code for free.
What is a Live Code Editor?
A live code editor is a tool that allows developers to write, test, and debug code in real-time. It typically includes a text editor, a preview window, and a console or debugging tool. The text editor allows developers to write code in a variety of programming languages, while the preview window displays the output of the code in real-time. The console or debugging tool allows developers to test and debug their code as they write it.
There are many popular live code editors available today, including CodePen, JSFiddle, and JS Bin. These tools are especially popular among web developers, as they allow for quick and easy testing and debugging of HTML, CSS, and JavaScript code.
Build a Live Code Editor Using HTML, CSS, and JavaScript [Source Code]
To create this Live code editor. First, you need to create three files, one HTML, CSS and another one is a JS File. After creating these files just paste the following codes in your file.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Live Code Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="code-editor">
<div class="code">
<div class="html-code">
<h1><img src="images/html.png" alt="">HTML</h1>
<textarea></textarea>
</div>
<div class="css-code">
<h1><img src="images/CSS.png" alt="">CSS</h1>
<textarea></textarea>
</div>
<div class="js-code">
<h1><img src="images/js.png" alt="">JS</h1>
<textarea spellcheck="false"></textarea>
</div>
</div>
<iframe id="result"></iframe>
</div>
<script src="script.js"></script>
</body>
</html>
Now that we have created the basic HTML markup, we can style the page using CSS. After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
background-color: rgba(222, 222, 255, 1);
font-family: sans-serif;
justify-content: center;
align-items: center;
}
.code-editor {
width: 95vw;
height: 95vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: #F1F2FF;
border-radius: 1rem;
overflow: hidden;
border: 2px solid #14007a;
}
.code {
display: grid;
grid-template-rows: repeat(3, 1fr);
overflow-y: auto;
background-color: #0E0D14;
padding: .5rem;
}
h1 {
font: 600 1.2rem sans-serif;
margin: .2rem 0;
color: #fff;
}
h1>img {
width: 1.2rem;
margin-right: 1rem;
vertical-align: middle;
}
.code textarea {
width: 100%;
height: calc(100% - 2.2rem);
background-color: rgba(22, 24, 45, 1);
color: rgb(74, 225, 255);
border: none;
outline: none;
padding: .5rem;
font-size: 1.1rem;
resize: vertical;
}
.code textarea::-webkit-scrollbar {
width: .4rem;
}
.code textarea::-webkit-scrollbar-thumb {
background-color: rgb(255, 40, 113);
border-radius: .4rem;
}
#result {
width: 100%;
height: 100%;
border: none;
}
a {
background-color: lime;
color: #fff;
padding: 0 1.2rem;
border-radius: .5rem;
text-decoration: none;
font-size: 2rem;
float: right;
cursor: pointer;
}
Lastly at the last Create Js file with the name of script.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
const html_code = document.querySelector('.html-code textarea');
const css_code = document.querySelector('.css-code textarea');
const js_code = document.querySelector('.js-code textarea');
const result = document.querySelector('#result');
function run() {
// Storing data in Local Storage
localStorage.setItem('html_code', html_code.value);
localStorage.setItem('css_code', css_code.value);
localStorage.setItem('js_code', js_code.value);
// Executing HTML, CSS $ JS code
result.contentDocument.body.innerHTML = `<style>${localStorage.css_code}</style>` + localStorage.html_code;
result.contentWindow.eval(localStorage.js_code);
}
// Checking if user is typing anything in input field
html_code.onkeyup = () => run();
css_code.onkeyup = () => run();
js_code.onkeyup = () => run();
// Accessing data stored in Local Storage. To make it more advanced you could check if there is any data stored in Local Storage.
html_code.value = localStorage.html_code;
css_code.value = localStorage.css_code;
js_code.value = localStorage.js_code;
In this blog post, we have explored how to create a live code editor using HTML, CSS, and JavaScript. We were able to create a tool that allows developers to write, test, and debug code in real-time.
This live code editor can be easily customised and expanded to include additional features, such as syntax highlighting, auto-completion, and debugging tools. Feel free to download the source code and experiment with your own modifications and enhancements.