Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on May 16, 2023

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

 

 

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

 

 

style.css

 

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
  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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(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());
      }
   });
})();

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme