How to make Live Coding Editor using HTML CSS and JavaScript ?

How to make Live Coding Editor using HTML CSS and JavaScript ?

Last Updated : 23 Jul, 2024

In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.

Final Output

ppp

Prerequisite

Approach

Begin by defining the HTML, CSS, and JavaScript files in your project.
Create the HTML structure to build the user interface, including text areas, buttons, and iframes. Use HTML elements such as <textarea>, <button>, and <iframe>.
Apply CSS styles to the HTML elements for a visually appealing and user-friendly interface. Define fonts, colors, and layouts to enhance the appearance of the editor.
In JavaScript, we created a function to read the HTML CSS JS code, and to convert it into UI, and will display it in Iframe Tag.

Example: This example illustrates the creation of a Live Coding Editor project using HTML CSS & JavaScript.

HTML

<!-- Index.html -->
<!DOCTYPE html>
<html>

<head>
    <title>Live Coding Editor</title>
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css">
</head>

<body>
    <div id="editor">
        <div class="code-section">
            <label for="htmlCode">
                HTML Code:
            </label>
            <textarea id="htmlCode" 
                      class="code" 
                      placeholder=
                        "Enter HTML code here">
            </textarea>
        </div>
        <div class="code-section">
            <label for="cssCode">
                CSS Code:
            </label>
            <textarea id="cssCode" 
                      class="code" 
                      placeholder=
                        "Enter CSS code here">
            </textarea>
        </div>
        <div class="code-section">
            <label for="jsCode">
                JavaScript Code:
            </label>
            <textarea id="jsCode" 
                      class="code" 
                      placeholder=
                        "Enter JavaScript code here">
            </textarea>
        </div>
        <div class="code-section">
            <label for="output">
                Output:
            </label>
            <div id="output" 
                 class="code">
            </div>
        </div>
        <div id="menu">
            <button id="runButton">
                Run Code
            </button>
            <button id="clearButton">
                Clear Code
            </button>
            <a id="downloadButton" 
               download="code.zip">
                Download Code
            </a>
        </div>
    </div>
    <iframe id="preview"></iframe>
    <script src="script.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js">
    </script>
</body>

</html>

CSS

/* Style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

#editor {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 10px;
}

label {
    font-weight: bold;
    color: #007acc;
}

.code-section {
    margin-bottom: 20px;
}

#htmlCode,
#cssCode {
    background-color: #fff;
}

.code {
    width: 100%;
    height: 200px;
    padding: 10px;
    border: none;
    resize: none;
    font-family: "Courier New",
        monospace;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 5px 10px;
    background-color: #007acc;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

#downloadButton {
    text-decoration: none;
    background-color: #007acc;
    color: #fff;
    padding: 5px 10px;
    margin-right: 10px;
}

iframe {
    width: 100%;
    height: calc(100% - 320px);
    border: none;
}

#htmlCode::placeholder,
#cssCode::placeholder,
#jsCode::placeholder {
    color: hsl(113, 100%, 49%);
}

/* Styles for responsive UI */
@media (max-width: 768px) {
    .code-section {
        width: 100%;
        margin: 10px 0;
    }
    .code {
        width: 100%;
    }
}
/* Style for scrollable output box */
#output {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto; 
    max-height: 300px; 
}

JavaScript

// Script.js
const htmlCode = 
    document.getElementById('htmlCode');
const cssCode = 
    document.getElementById('cssCode');
const jsCode = 
    document.getElementById('jsCode');
const output = 
    document.getElementById('output')
const previewFrame = 
    document.getElementById('preview');
const runButton = 
    document.getElementById('runButton');
const clearButton = 
    document.getElementById('clearButton');
const downloadButton = 
    document.getElementById('downloadButton');

const updatePreview = () => {
    const html = htmlCode.value;
    const css = 
`<style>${cssCode.value}</style>`;
    const js = 
`<script>${jsCode.value}</script>`;

    const code = `${html}\n${css}\n${js}`;
    output.innerHTML = code;}

const clearCode=() => {
    htmlCode.value = '';
    cssCode.value = '';
    jsCode.value = '';
    updatePreview()}

const downloadCode = () => {
    const zip = new JSZip();
    zip.file("index.html", htmlCode.value);
    zip.file("styles.css", cssCode.value);
    zip.file("script.js", jsCode.value);

    zip.generateAsync({ type: "blob" }).
        then(function (content) {
        saveAs(content, "code.zip");
    })}

// Initial preview update
updatePreview();
downloadButton.addEventListener('click', () => {
    const zip = new JSZip();
    zip.file("index.html", htmlCode.value);
    zip.file("styles.css", cssCode.value);
    zip.file("script.js", jsCode.value);
    zip.generateAsync({ type: "blob" })
        .then( (content)=> {
            saveAs(content, "code.zip");
        })});
        
runButton.addEventListener('click', updatePreview);
clearButton.addEventListener('click', clearCode);
downloadButton.addEventListener('click', downloadCode);

Output

How to make Live Coding Editor using HTML CSS and JavaScript ?

pj1223iano

Improve

Article Tags :

Similar Reads

How to create a Color Generator using HTML CSS and JavaScript ?

In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color

How to create linear-gradient color generator using HTML, CSS and JavaScript ?

Creating a background generator using HTML, CSS, and JavaScript is an excellent way to add interactive and visually appealing features to your web projects. This tool allows users to generate gradient backgrounds based on their selected color values. In this article, we'll walk you through the steps

How to create Hex color generator using HTML CSS and JavaScript?

Hex color codes are six-digit combinations representing the amount of red, green, and blue (RGB) in a color. These codes are essential in web design and development for specifying colors in HTML and CSS. The hex color generator provides the hex code for any selected color, making it a valuable tool

Random Choice Picker using HTML CSS and JavaScript

The Random Choice Picker is a fully functional project that lets you enter some choices and then it will randomly pick any one of them. You can create this super useful project using HTML, CSS, and JavaScript. The basic idea is to input all your choices separated by 'commas', here choices can be any

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t

How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction,

How to create a revealing sidebar using HTML CSS and JavaScript?

A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and

Design Random Color Generator using HTML CSS and JavaScript

A Random Color Generator app is used to create random colors with a simple button click, displaying both HEX and RGB codes that users can copy. It's built using HTML, CSS, and JavaScript, making it a handy tool for designers or developers who need quick color ideas. The app can also include a Dark M

How to create notes taking site using HTML, Bootstrap and JavaScript ?

We are going to make a website that will take our notes and saves them for our future use using HTML, CSS and JavaScript .Prerequisite:Basic understanding of HTML, Bootstrap, and JavaScript.Approach:HTML: We will create the basic framework of the website using HTML.Bootstrap: makes our work easier a

Create a Health Tracker using HTML CSS & JavaScript

In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag