Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save justinledwards/d4983a923dba1635e407be31d166cecb to your computer and use it in GitHub Desktop.
Save justinledwards/d4983a923dba1635e407be31d166cecb to your computer and use it in GitHub Desktop.
Javascript REPL

On-Page JavaScript Console.

ChatGPT:

Creating a simple on-page JavaScript console or REPL can be achieved with a combination of HTML, CSS, and JavaScript. You can use localStorage to maintain state between sessions. Here's a basic implementation that you can use as a starting point and modify to fit your needs:

  1. First, create the HTML structure for your on-page console:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>On-Page JavaScript Console</title>
    <style>
        /* Add your CSS styles here */
    </style>
</head>
<body>
    <div id="console">
        <div id="output"></div>
        <form id="input-form">
            <input type="text" id="input" autocomplete="off" autofocus>
        </form>
    </div>
    <script>
        // Add your JavaScript code here
    </script>
</body>
</html>
  1. Add some basic CSS styles:
body {
    font-family: monospace;
    background-color: #282a36;
    color: #f8f8f2;
}

#console {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

#output {
    flex: 1;
    overflow-y: auto;
}

#input-form {
    display: flex;
}

#input {
    flex: 1;
    background-color: #44475a;
    border: none;
    border-radius: 4px;
    color: #f8f8f2;
    padding: 0.5rem;
    outline: none;
}
  1. Add the JavaScript code to handle the console input, output, and localStorage:
const output = document.getElementById('output');
const inputForm = document.getElementById('input-form');
const input = document.getElementById('input');

// Load previous session data from localStorage
const sessionData = localStorage.getItem('sessionData');
if (sessionData) {
    output.innerHTML = sessionData;
}

inputForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const inputValue = input.value;
    const command = document.createElement('div');
    command.textContent = `> ${inputValue}`;
    output.appendChild(command);

    try {
        const result = eval(inputValue);
        const resultElem = document.createElement('div');
        resultElem.textContent = result;
        output.appendChild(resultElem);
    } catch (error) {
        const errorElem = document.createElement('div');
        errorElem.style.color = 'red';
        errorElem.textContent = error;
        output.appendChild(errorElem);
    }

    // Save the session data to localStorage
    localStorage.setItem('sessionData', output.innerHTML);
    
    input.value = '';
});

This basic implementation provides a simple on-page JavaScript console that stores the session history in localStorage. You can further customize the appearance, features, and behavior to suit your specific needs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment