5 Easy Step to Build Online html editor in [30 minutes]

Want to build online html editor by your own? if yes this article is made for you.

in this article,we described how to creates a simple real-time HTML editor with an input section for writing HTML code and an output section for rendering output in an iframe.

The rendered output updates automatically as the user types or modifies the code in the textarea.

1.Styles for html editor

Here we have given few simple style to html editor such splitting window into two section, one for input and other for output. all these CSS added in style tag.

  <style>
    body{
      margin: 0px;
      padding: 5px;
    }
    .topheader{
      background: gray;
      height: 100px;
    }
    /* Style for the editor container */
    #editor-container {
      display: flex;
    }

    /* Style for the editor sections */
    .editor-section {
      flex: 1;
      padding: 0px;
      border: 1px solid #ccc;
    }
    #html-code{
      font-size: 18px;
    }

    /* Style for the output section */
    #output-section {
      min-height: 200px;
      overflow-y: auto;
    }
    #output-frame{     
      border: 2px solid gray;
    }
  </style>

2.HTML body content for online html editor

The body element contains visible content of the html document. Lets understand the below code.

<div class=”topheader”>: This div contains the top header of the HTML editor, with a gray background and centered text (achieved using the <center> tag, although this tag is obsolete in HTML5).

<div id=”editor-container”>: This div contains the two main sections of the HTML editor. the HTML code input section and the output display section. It uses flex layout to arrange it side by side.

Input side

<textarea id=”html-code”..></textarea>: A textarea element for users to write their HTML code. It has an ID “html-code,” which is later used to fetch its content with JavaScript.

Output side

<div class=”editor-section” id=”output-section”>: This div represents the container for displaying the output.

<iframe id=”output-frame” …></iframe>: An iframe element is used to rendere output of the HTML code. The id attribute “output-frame” is used to access the iframe’s document with JavaScript.

  <div class="topheader"><center><h1>First HTML Editor</h1></center></div>

  <div id="editor-container">
    <!-- Section for writing HTML code -->
    <div class="editor-section">
      <h2>HTML Code</h2>
      <textarea id="html-code" rows="20" cols="75" placeholder="Write your HTML code here..."></textarea>
    </div>

    <!-- Section to display the output -->
    <div class="editor-section" id="output-section">
      <h2>Output</h2>
      <iframe id="output-frame" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </div>

3.Javascript to build online html editor

To add actual editor functionality , you need to add javascript.

updateOutput(): This function updates the content of the output iframe with the HTML code entered by the user in the input section textarea.

It gets the HTML code from the textarea with the ID “html-code” and then writes it to the iframe’s document using the write() method. The contentWindow.document property used to access the document inside the iframe.

Next, we have a addEventListener() function,this calls the updateOutput() function whenever the content of the textarea changes.

    // javascript Function to update the output frame with the HTML code
    function updateOutput() {
      const htmlCode = document.getElementById('html-code').value;
      const outputFrame = document.getElementById('output-frame').contentWindow.document;
      outputFrame.open();
      outputFrame.write(htmlCode);
      outputFrame.close();
    }

    // Call the updateOutput function when the HTML code changes
    document.getElementById('html-code').addEventListener('input', updateOutput);

    // Initial call to updateOutput function to display the default placeholder text
    updateOutput();

4.Save the file with .html extension

Once you added the code in file , next save the file with .html extension.

<html>
<head><title>My editor</title>
<style>
/* add your css code here*/
</style>
</head>
<body>

<!-- add html content here -->

<script>
     /*  add javascript code here */
</script>

</body>
</html>

Cool, now open this file in web browser like chrome.Now write code in the input section and see the real time result in the output section.

example of online html editor

FAQ About How to Build Online HTML editor