Online HTML Editor With Instant Preview

Preview:

Description:

A basic HTML editor with instant preview app that allows you to edit HTML code directly on a live website or instantly see how HTML code will render.

Built with JavaScript, CSS, and stylet.css. The live preview makes it so much easier to find that coding mistake you just made.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="./stylet.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="app.js"></script>

2. Code the HTML for the HTML editor.

<div class="main-editor">
  <button class="button-edit button">Run</button>
   <!-- text-editor[IDE] section -->
  <div class="first color" contenteditable autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
    <!-- the codes are being written in this div, the "contenteditable" which means content editable, means the div can be edited  -->
    <span class="text-grey text-bold">
      Your HTML Code Here
    </span>
  </div>
   <!-- end of text-editor[IDE] section -->
  <!-- iframe[view] section -->
  <iframe class="second">
    <!-- the codes written are turned into html, css and js scripts and are placed inside this iframe -->   
  </iframe>
  <!-- end of iframe[view] section -->
</div>