Writing Your Own Embedded Editor (JS/HTML/CSS)

by Kenwright

Search terms:

How to make a website like CodePen
How to create Live Coding Playground
How to create a live code editor for a website
How to make a web-based compiler like code pen

Introduction

Have you ever wondered how you can create your own editor and compiler in your browser using only Javascript, CSS and HTML? It’s very common today, and you’ll see lots of great websites like CodePen, Coding Playground and so on. At first, you might be wondering, it’s going to be hard! It’s going to be complex! Well you’d be wrong. It’s so simple and elegant the solution, you’ll be impressed!

All you need to do is create a single file index.html. As for this tutorial, you’ll put all your code in a single file, you can split it into separate html/css/js files later on as your project starts to grow - but here, it’s about seeing it all working together (underlying principle).

You can see what to expect (screenshot):

The steps are as follows:

Create 4 tabs using standard html/css (call them HTML,CSS,JS and Output)
Create 3 textareas which will be used for entering and editing the HTML/CSS/JS
Create an iframe (this is used to redirect the compiled HTML/CSS/JS output to - created live on the fly when you click the output button)
When the ‘Output’ tab is selected, this is where you do the real magic. You get the contents from the 3 textareas, then you write them to the iframe (generates the output).
Ta-da! You’re all done!

Here is the full index.html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  box-sizing: border-box;
}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width:100%;
  height:100%;
  resize: none;
  min-height:300px;
}
</style>
</head>
<body>

<p>Click on the tab to select the option, edit the text in the output underneath:</p>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'html')">HTML</button>
  <button class="tablinks" onclick="openTab(event, 'css')">CSS</button>
  <button class="tablinks" onclick="openTab(event, 'js')">Javascript</button>
  <button class="tablinks" onclick="openTab(event, 'code')">Output</button>
</div>


<textarea id="html" placeholder="HTML" class="tabcontent">
Your html script goes here....
</textarea> 
<textarea id="css" placeholder="CSS" class="tabcontent">
Placeholder css script text here...
</textarea> 
<textarea id="js" placeholder="javascript" class="tabcontent">
Your juicy Javascript code goes here ....
</textarea> 

<!-- the output is generated live! -->
<iframe id="code" placeholder="code" class="tabcontent"></iframe>
            

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
  
  if (tabName=='code')
  {
    compile();
  }
}
function compile() {
    var html = document.getElementById("html");
    var css = document.getElementById("css");
    var js = document.getElementById("js");
    //let output = output.contentWindow || output.contentDocument.document || output.contentDocument;
    //let code = output.document;
    
	var ifrm = document.getElementById('code');
	var code = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
	code = code.document;
	
    code.open();
    code.write(html.value + "<style>"+css.value+"</style>" + "<script>"+js.value+" <" + "/script>");
    code.close();
}

</script>
   
</body>
</html>

Warning
A real problem to watch out for, is when you output your string to your iframe. Specifically writing <\script> causes the browser interpreter to think you’ve ended your script. However, a simple fix is to split the string <" + "/script>" - so your script works as it should!

Test it Out

Take the example for a spin run, click on the HTML tag button and enter some text but include tags, such as, h2, b, p, then click on the output tag and check the formatting is correct.

Take it even further! Go to the CSS tag button, and enter some style formatting script - then click on the output tag to see that it’s doing what you expected!

Some simple tweaks/further ideas:

Temporarily store versions to localstorage so if your browser crashes, you don’t lose what you’re editing
Extend localstorage to store versions (v1, v2, v3)
Add Prettify so your code in the textareas are syntax highlighted (keywords are highlighted)
Add a post option, to share your code snippets, uploads them to a common webpage (mix Ajax and Php? Or NodeJS?)

Writing Your Own Embedded Editor (JS/HTML/CSS)

Introduction

Test it Out

Example 'Live' Running

References