Awesome Javascript Editor

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Editor</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/nord.min.css">
</head>
<body>
    <div class="editor-container">
        <div class="controls">
            <button id="run-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
                Run (⌘⏎)
            </button>
            <select id="theme-selector" class="theme-selector">
                <option value="nord">Nord</option>
                <option value="material">Material</option>
                <option value="monokai">Monokai</option>
                <option value="solarized">Solarized</option>
            </select>
        </div>
        
        <div class="code-editor">
            <textarea id="editor">// Minimal JavaScript Editor
// Write your code here and press Run

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log('Fibonacci sequence:');
for (let i = 0; i < 10; i++) {
  console.log(fibonacci(i));
}

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Fira Code', 'Menlo', 'Consolas', monospace;
    background-color: #2E3440;
    color: #D8DEE9;
    height: 100vh;
    overflow: hidden;
}

.editor-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.controls {
    display: flex;
    padding: 8px 12px;
    background-color: #3B4252;
    border-bottom: 1px solid #4C566A;
}

button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #434C5E;
    color: #E5E9F0;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: all 0.2s ease;
}

button:hover {
    background-color: #4C566A;
}

button svg {
    color: #A3BE8C;
}

.theme-selector {
    margin-left: auto;
    background-color: #434C5E;
    color: #E5E9F0;
    border: 1px solid #4C566A;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 13px;
}

.code-editor {
    flex: 1;
    overflow: hidden;
}

.CodeMirror {
    height: 100% !important;
    font-family: 'Fira Code', 'Menlo', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
}

.console {
    height: 180px;
    background-color: #3B4252;
    border-top: 1px solid #4C566A;
    padding: 12px;
    overflow-y: auto;
    font-family: 'Fira Code', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
}

#console-output {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.console-message {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.4;
}

.console-log {
    color: #D8DEE9;
}

.console-error {
    color: #BF616A;
}

.console-warn {
    color: #EBCB8B;
}

JS

// Initialize CodeMirror
const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    mode: 'javascript',
    theme: 'nord',
    lineNumbers: true,
    indentUnit: 4,
    tabSize: 4,
    matchBrackets: true,
    styleActiveLine: true,
    lineWrapping: true,
    extraKeys: {
        'Cmd-Enter': runCode,
        'Ctrl-Enter': runCode
    }
});

// Get DOM elements
const runBtn = document.getElementById('run-btn');
const themeSelector = document.getElementById('theme-selector');
const consoleOutput = document.getElementById('console-output');

// Event listeners
runBtn.addEventListener('click', runCode);
themeSelector.addEventListener('change', changeTheme);

// Override console methods to capture output
const originalConsole = {
    log: console.log,
    error: console.error,
    warn: console.warn
};

console.log = function(...args) {
    originalConsole.log.apply(console, args);
    printToConsole(args, 'log');
};

console.error = function(...args) {
    originalConsole.error.apply(console, args);
    printToConsole(args, 'error');
};

console.warn = function(...args) {
    originalConsole.warn.apply(console, args);
    printToConsole(args, 'warn');
};

// Functions
function runCode() {
    // Clear console
    consoleOutput.innerHTML = '';
    
    // Get code from editor
    const code = editor.getValue();
    
    try {
        // Run the code
        new Function(code)();
    } catch (error) {
        console.error(error);
    }
}

function changeTheme() {
    const theme = themeSelector.value;
    editor.setOption('theme', theme);
}

// Set initial theme
editor.setOption('theme', 'nord');

Awesome Javascript Editor

Recommended

Javascript Image Slider

Stargazer Javascript Game

JavaScript Card Slider

HTML

CSS

JS

Recommended

Javascript Image Slider

Stargazer Javascript Game

JavaScript Card Slider

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS