Build a Realtime HTML CSS & JS Frontend Code Editor With Live Preview Using IFrame in Browser Using Javascript

Welcome folks today in this blog post we will be building a realtime html css and js frontend code editor in browser using iframe in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<header>
    <h1>Real-Time HTML/CSS Editor</h1>
    <h2>Put something between the tags or replace them altogether...</h2>
 </header>
 <div class="container grid">
    <form>
       <h3>HTML</h3>
       <textarea id="html" class="edit"><h1></h1></textarea>
 
       <h3>CSS</h3>
       <textarea id="css" class="edit">h1 {
 
 }</textarea>
    </form>
 </div>
 
 <div class="output grid">
    <iframe></iframe>
 </div>

<h1>Real-Time HTML/CSS Editor</h1>

<h2>Put something between the tags or replace them altogether...</h2>

</header>

<form>

<textarea id="css" class="edit">h1 {

}</textarea>

</form>

</div>

</div>

And now we need to write the css code for the editor as shown below

style.css

  body {
   background: none !important;
   height: 100%;
   margin: 20px;
   padding: 0;
   font-family: Arial;
   font-weight: bold;
}
h1,
h2 {
   text-align: center;
}
h1 {
   font-size: 2em;
}
h3 {
   margin-top: 20px;
}
textarea {
   background: #fff !important;
   width: 100%;
   margin: 0 20px 0 0;
   height: 200px;
   border-radius: 5px;
   border-color: #555;
   font-family: "Source Code Pro", monospace;
   font-size: 1em;
   resize: none;
}
textarea:hover {
   background: #fff !important;
}
textarea:focus {
   outline: none;
   background: #fff !important;
}
.grid {
   width: 50%;
   float: left;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0 30px 0 0;
}
.edit {
   background: #fff !important;
   padding: 5px;
}
.output {
   background: #fff;
   border-left: 1px solid #f3f3f3;
   overflow: hidden;
   padding: 0 20px;
   margin: 20px 0;
}
.output iframe {
   border: none;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.output iframe::-webkit-scrollbar {
   display: none;
}

body {

background: none !important;

height: 100%;

margin: 20px;

padding: 0;

font-family: Arial;

font-weight: bold;

}

h1,

h2 {

text-align: center;

}

h1 {

font-size: 2em;

}

h3 {

margin-top: 20px;

}

textarea {

background: #fff !important;

width: 100%;

margin: 0 20px 0 0;

height: 200px;

border-radius: 5px;

border-color: #555;

font-family: "Source Code Pro", monospace;

font-size: 1em;

resize: none;

}

textarea:hover {

background: #fff !important;

}

textarea:focus {

outline: none;

background: #fff !important;

}

.grid {

width: 50%;

float: left;

overflow: hidden;

box-sizing: border-box;

padding: 0 30px 0 0;

}

.edit {

background: #fff !important;

padding: 5px;

}

.output {

background: #fff;

border-left: 1px solid #f3f3f3;

overflow: hidden;

padding: 0 20px;

margin: 20px 0;

}

.output iframe {

border: none;

width: 100%;

height: 100%;

overflow: hidden;

}

.output iframe::-webkit-scrollbar {

display: none;

}

And now we need to write the javascript code to actually execute the code as we type this will include the html,css and javascript code as shown below

script.js

(function() {
   $(".grid").height($(window).height());

   var contents = $("iframe").contents(),
       body = contents.find("body"),
       styleTag = $("<style></style>").appendTo(contents.find("head"));

   $("textarea.edit").keyup(function() {
      var $this = $(this);
      if ($this.attr("id") === "html") {
         body.html($this.val());
      } else {
         // it had to be css
         styleTag.text($this.val());
      }
   });
})();

(function() {

$(".grid").height($(window).height());

var contents = $("iframe").contents(),

body = contents.find("body"),

styleTag = $("<style></style>").appendTo(contents.find("head"));

$("textarea.edit").keyup(function() {

var $this = $(this);

if ($this.attr("id") === "html") {

body.html($this.val());

} else {

// it had to be css

styleTag.text($this.val());

}

});

})();