How to Build Live Code Editor Like
CodePen in JavaScript
You can edit HTML, CSS and JavaScript code, and view the result in your browser. The window to the left is editable - edit the code and click on the "Run" button to view the result in the right window or it will be auto run.
Video Tutorial of Live Code Editor Like CodePen
Live Code Editor Like CodePen [Source Codes]
To Create Live Code Editor Like CodePen with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="code-editor">
<div class="code">
<div class="html-code">
<h1>HTML</h1>
<textarea></textarea>
</div>
<div class="css-code">
<h1>CSS</h1>
<textarea></textarea>
</div>
<div class="js-code">
<h1>JS</h1>
<textarea spellcheck="false"></textarea>
</div>
</div>
<iframe id="result"></iframe>
</div>
<script src="script.js"></script>
</body>
</html>
Now paste the following codes into your style.css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #2C303A;
}
.code-editor {
width: 98vw;
height: 95vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: #FFFFFF;
overflow: hidden;
}
.code {
display: grid;
grid-template-rows: repeat(3, 1fr);
overflow-y: auto;
background-color: #060606;
padding: .95rem;
}
h1 {
font: 600 1.2rem sans-serif;
margin:0;
background-color: #1D1E22;
color: #AAAEBC;
width: 80px;
padding: 5px;
text-align: center;
}
.code textarea {
width: 100%;
height: calc(100% - 4rem);
background-color:#1D1E22;
color: green;
border: none;
padding: 1rem;
font-size: 1.5rem;
resize: vertical;
}
.code textarea::-webkit-scrollbar {
width: .4rem;
}
.code textarea::-webkit-scrollbar-thumb {
background-color: #606060;
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;
}
Now paste the following codes into your script.js file
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() {
localStorage.setItem('html_code', html_code.value);
localStorage.setItem('css_code', css_code.value);
localStorage.setItem('js_code', js_code.value);
result.contentDocument.body.innerHTML = `<style>${localStorage.css_code}</style>` + localStorage.html_code;
result.contentWindow.eval(localStorage.js_code);
}
html_code.onkeyup = () => run();
css_code.onkeyup = () => run();
js_code.onkeyup = () => run();
html_code.value = localStorage.html_code;
css_code.value = localStorage.css_code;
js_code.value = localStorage.js_code;
If you face any difficulties while creating Live Code Editor or your code is not working as expected, you can download the source code files by clicking download button.