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
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
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()); } }); })(); |