{"id":107641,"date":"2025-05-27T14:46:59","date_gmt":"2025-05-27T09:16:59","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/?page_id=107641"},"modified":"2025-05-19T16:50:44","modified_gmt":"2025-05-19T11:20:44","slug":"javascript-compiler-tool","status":"publish","type":"page","link":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/","title":{"rendered":"Online JavaScript Compiler"},"content":{"rendered":"\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/ace.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jshint\/2.13.6\/jshint.min.js\"><\/script>\n    <style>\n        .js-compiler-container {\n            --live-editor-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            --live-editor-editor-font-family: 'Courier New', Courier, monospace;\n            --live-editor-bg-color-light: #f4f7f9;\n            --live-editor-text-color-light: #2c3e50;\n            --live-editor-editor-bg-light: #ffffff;\n            --live-editor-preview-bg-light: #ffffff;\n            --live-editor-border-color-light: #d1d5db;\n            --live-editor-toolbar-bg-light: #e9ecef;\n            --live-editor-button-bg-light: #ffffff;\n            --live-editor-button-text-light: #34495e;\n            --live-editor-button-hover-bg-light: #f8f9fa;\n            --live-editor-button-active-bg-light: #e9ecef;\n            --live-editor-accent-color-light: #3498db;\n            --live-editor-shadow-color-light: rgba(0, 0, 0, 0.1);\n            --live-editor-line-number-color-light: #95a5a6;\n\n            --live-editor-bg-color-dark: #2c3e50;\n            --live-editor-text-color-dark: #ffffff;\n            --live-editor-editor-bg-dark: #34495e;\n            --live-editor-preview-bg-dark: #34495e;\n            --live-editor-border-color-dark: #566573;\n            --live-editor-toolbar-bg-dark: #3a5064;\n            --live-editor-button-bg-dark: #4a657c;\n            --live-editor-button-text-dark: #ffffff;\n            --live-editor-button-hover-bg-dark: #527089;\n            --live-editor-button-active-bg-dark: #3e5a70;\n            --live-editor-accent-color-dark: #5dade2;\n            --live-editor-shadow-color-dark: rgba(0, 0, 0, 0.3);\n            --live-editor-line-number-color-dark: #bdc3c7;\n\n            --live-editor-bg-color: var(--live-editor-bg-color-light);\n            --live-editor-text-color: var(--live-editor-text-color-light);\n            --live-editor-editor-bg: var(--live-editor-editor-bg-light);\n            --live-editor-preview-bg: var(--live-editor-preview-bg-dark);\n            --live-editor-border-color: var(--live-editor-border-color-light);\n            --live-editor-toolbar-bg: var(--live-editor-toolbar-bg-light);\n            --live-editor-button-bg: var(--live-editor-button-bg-light);\n            --live-editor-button-text: var(--live-editor-button-text-light);\n            --live-editor-button-hover-bg: var(--live-editor-button-hover-bg-light);\n            --live-editor-button-active-bg: var(--live-editor-button-active-bg-light);\n            --live-editor-accent-color: var(--live-editor-accent-color-light);\n            --live-editor-shadow-color: var(--live-editor-shadow-color-light);\n            --live-editor-line-number-color: var(--live-editor-line-number-color-light);\n\n            --live-editor-editor-font-size: 16px;\n            --live-editor-toolbar-height: 50px;\n            --live-editor-footer-height: 30px;\n\n            font-family: var(--live-editor-font-family);\n            background-color: var(--live-editor-bg-color);\n            color: var(--live-editor-text-color);\n            display: flex;\n            flex-direction: column;\n            height: 100vh;\n            width: 100%;\n            overflow: hidden;\n            transition: background-color 0.3s, color 0.3s;\n            box-sizing: border-box;\n        }\n\n        .js-compiler-container.js-compiler-dark-mode {\n            --live-editor-bg-color: var(--live-editor-bg-color-dark);\n            --live-editor-text-color: var(--live-editor-text-color-dark);\n            --live-editor-editor-bg: var(--live-editor-editor-bg-dark);\n            --live-editor-preview-bg: var(--live-editor-preview-bg-dark);\n            --live-editor-border-color: var(--live-editor-border-color-dark);\n            --live-editor-toolbar-bg: var(--live-editor-toolbar-bg-dark);\n            --live-editor-button-bg: var(--live-editor-button-bg-dark);\n            --live-editor-button-text: var(--live-editor-button-text-dark);\n            --live-editor-button-hover-bg: var(--live-editor-button-hover-bg-dark);\n            --live-editor-button-active-bg: var(--live-editor-button-active-bg-dark);\n            --live-editor-accent-color: var(--live-editor-accent-color-dark);\n            --live-editor-shadow-color: var(--live-editor-shadow-color-dark);\n            --live-editor-line-number-color: var(--live-editor-line-number-color-dark);\n        }\n\n        .js-compiler-toolbar {\n            display: flex;\n            align-items: center;\n            padding: 0 10px;\n            height: var(--live-editor-toolbar-height);\n            background-color: var(--live-editor-toolbar-bg);\n            border-bottom: 1px solid var(--live-editor-border-color);\n            flex-wrap: wrap;\n            gap: 8px;\n            transition: background-color 0.3s, border-color 0.3s;\n            flex-shrink: 0;\n            min-width: 100%;\n            overflow-x: hidden;\n        }\n\n        .js-compiler-toolbar-group {\n            display: flex;\n            gap: 8px;\n        }\n\n        .js-compiler-toolbar-group.js-compiler-right {\n            margin-left: auto;\n        }\n\n        .js-compiler-toolbar button {\n            background-color: var(--live-editor-button-bg);\n            color: var(--live-editor-button-text);\n            border: 1px solid var(--live-editor-border-color);\n            padding: 8px 12px;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 14px;\n            transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.3s;\n            display: flex;\n            align-items: center;\n            gap: 5px;\n            white-space: nowrap;\n        }\n\n        .js-compiler-toolbar button:hover {\n            background-color: var(--live-editor-button-hover-bg);\n            border-color: var(--live-editor-accent-color);\n            box-shadow: 0 2px 4px var(--live-editor-shadow-color);\n        }\n\n        .js-compiler-toolbar button:active {\n            background-color: var(--live-editor-button-active-bg);\n            box-shadow: inset 0 1px 3px var(--live-editor-shadow-color);\n        }\n\n        .js-compiler-toolbar button .js-compiler-icon {\n            font-size: 1.1em;\n        }\n\n        .js-compiler-main-container {\n            display: flex;\n            flex-grow: 1;\n            padding: 8px;\n            overflow: hidden;\n            height: calc(100vh - var(--live-editor-toolbar-height) - var(--live-editor-footer-height) - 16px);\n            gap: 0;\n            min-width: 100%;\n            position: relative;\n        }\n\n        .js-compiler-container:fullscreen .js-compiler-main-container,\n        .js-compiler-container:-webkit-full-screen .js-compiler-main-container,\n        .js-compiler-container:-moz-full-screen .js-compiler-main-container,\n        .js-compiler-container:-ms-fullscreen .js-compiler-main-container {\n            height: calc(100vh - var(--live-editor-toolbar-height) - var(--live-editor-footer-height));\n            padding: 0;\n        }\n\n        .js-compiler-editor-wrapper,\n        .js-compiler-output-wrapper {\n            display: flex;\n            flex-direction: column;\n            background-color: var(--live-editor-editor-bg);\n            border: 1px solid var(--live-editor-border-color);\n            border-radius: 8px;\n            box-shadow: 0 4px 6px var(--live-editor-shadow-color);\n            overflow: hidden;\n            transition: background-color 0.3s, border-color 0.3s;\n            position: relative;\n            flex: 1;\n            min-width: 150px;\n            max-width: calc(100% - 158px);\n        }\n\n        .js-compiler-container:fullscreen .js-compiler-editor-wrapper,\n        .js-compiler-container:fullscreen .js-compiler-output-wrapper,\n        .js-compiler-container:-webkit-full-screen .js-compiler-editor-wrapper,\n        .js-compiler-container:-webkit-full-screen .js-compiler-output-wrapper,\n        .js-compiler-container:-moz-full-screen .js-compiler-editor-wrapper,\n        .js-compiler-container:-moz-full-screen .js-compiler-output-wrapper,\n        .js-compiler-container:-ms-fullscreen .js-compiler-editor-wrapper,\n        .js-compiler-container:-ms-fullscreen .js-compiler-output-wrapper {\n            border-radius: 0;\n            border: none;\n            box-shadow: none;\n        }\n\n        .js-compiler-divider {\n            width: 8px;\n            background-color: var(--live-editor-border-color);\n            cursor: col-resize;\n            transition: background-color 0.3s;\n            flex-shrink: 0;\n            z-index: 10;\n        }\n\n        .js-compiler-container:fullscreen .js-compiler-divider,\n        .js-compiler-container:-webkit-full-screen .js-compiler-divider,\n        .js-compiler-container:-moz-full-screen .js-compiler-divider,\n        .js-compiler-container:-ms-fullscreen .js-compiler-divider {\n            display: none;\n        }\n\n        .js-compiler-divider:hover {\n            background-color: var(--live-editor-accent-color);\n        }\n\n        .js-compiler-editor-pane {\n            display: flex;\n            flex-grow: 1;\n            position: relative;\n            overflow: hidden;\n            background-color: var(--live-editor-editor-bg);\n            transition: background-color 0.3s;\n        }\n\n        .js-compiler-line-numbers {\n            width: 40px;\n            padding: 8px 5px 8px 8px;\n            font-family: var(--live-editor-editor-font-family);\n            font-size: var(--live-editor-editor-font-size);\n            line-height: 1.6;\n            text-align: right;\n            color: var(--live-editor-line-number-color);\n            background-color: var(--live-editor-editor-bg);\n            border-right: 1px solid var(--live-editor-border-color);\n            user-select: none;\n            overflow-y: hidden;\n            white-space: pre;\n            transition: background-color 0.3s, color 0.3s, border-color 0.3s, font-size 0.2s;\n        }\n\n        #editor {\n            flex-grow: 1;\n            width: calc(100% - 40px);\n            font-family: var(--live-editor-editor-font-family);\n            font-size: var(--live-editor-editor-font-size);\n            line-height: 1.6;\n            border: none;\n            outline: none;\n            background-color: var(--live-editor-editor-bg);\n            color: var(--live-editor-text-color);\n            overflow-wrap: normal;\n            transition: background-color 0.3s, color 0.3s, font-size 0.2s;\n        }\n\n        .js-compiler-container.js-compiler-dark-mode #editor {\n            color: var(--live-editor-text-color-dark);\n        }\n\n        #output {\n            width: 100%;\n            height: 100%;\n            border: none;\n            background-color: var(--live-editor-preview-bg);\n            transition: background-color 0.3s;\n            padding: 12px;\n            overflow-y: auto;\n            font-family: var(--live-editor-editor-font-family);\n            font-size: var(--live-editor-editor-font-size);\n            line-height: 1.6;\n            color: var(--live-editor-text-color);\n        }\n\n        .js-compiler-container:fullscreen #output,\n        .js-compiler-container:-webkit-full-screen #output,\n        .js-compiler-container:-moz-full-screen #output,\n        .js-compiler-container:-ms-fullscreen #output {\n            border-radius: 0;\n        }\n\n        .js-compiler-error {\n            color: #e74c3c;\n        }\n\n        .js-compiler-success {\n            color: #2ecc71;\n        }\n\n        .js-compiler-warning {\n            color: #e67e22;\n        }\n\n        .js-compiler-footer-info {\n            display: flex;\n            justify-content: flex-end;\n            padding: 0 10px;\n            height: var(--live-editor-footer-height);\n            align-items: center;\n            font-size: 12px;\n            color: var(--live-editor-text-color);\n            background-color: var(--live-editor-toolbar-bg);\n            border-top: 1px solid var(--live-editor-border-color);\n            gap: 15px;\n            transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n            flex-shrink: 0;\n            min-width: 100%;\n        }\n\n        .js-compiler-container:fullscreen .js-compiler-footer-info,\n        .js-compiler-container:-webkit-full-screen .js-compiler-footer-info,\n        .js-compiler-container:-moz-full-screen .js-compiler-footer-info,\n        .js-compiler-container:-ms-fullscreen .js-compiler-footer-info {\n            display: flex;\n        }\n\n        .js-compiler-modal {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 600px;\n            background-color: rgba(0, 0, 0, 0.6);\n            justify-content: center;\n            align-items: center;\n            z-index: 1000;\n        }\n\n        .js-compiler-modal-content {\n            background-color: var(--live-editor-toolbar-bg);\n            color: var(--live-editor-text-color);\n            padding: 20px;\n            border-radius: 8px;\n            width: min(90%, 400px);\n            box-shadow: 0 6px 12px var(--live-editor-shadow-color);\n        }\n\n        .js-compiler-modal-content h2 {\n            margin: 0 0 16px;\n            font-size: clamp(18px, 5vw, 20px);\n            color: var(--live-editor-text-color);\n        }\n\n        .js-compiler-modal-content input {\n            width: 100%;\n            padding: 10px;\n            margin-bottom: 12px;\n            border: 1px solid var(--live-editor-border-color);\n            border-radius: 6px;\n            font-size: 14px;\n            background-color: var(--live-editor-button-bg);\n            color: var(--live-editor-text-color);\n        }\n\n        .js-compiler-modal-content button {\n            padding: 8px 16px;\n            margin: 0 4px;\n            border: 1px solid var(--live-editor-border-color);\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 14px;\n            background-color: var(--live-editor-button-bg);\n            color: var(--live-editor-button-text);\n            transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;\n        }\n\n        .js-compiler-modal-content .js-compiler-save {\n            background-color: var(--live-editor-accent-color);\n            color: var(--live-editor-button-text-dark);\n        }\n\n        .js-compiler-modal-content .js-compiler-cancel,\n        .js-compiler-file-item .js-compiler-delete {\n            background-color: #e74c3c;\n            color: var(--live-editor-button-text-dark);\n        }\n\n        .js-compiler-modal-content button:hover {\n            background-color: var(--live-editor-button-hover-bg);\n            border-color: var(--live-editor-accent-color);\n            box-shadow: 0 2px 4px var(--live-editor-shadow-color);\n        }\n\n        .js-compiler-file-list {\n            max-height: 200px;\n            overflow-y: auto;\n            margin-bottom: 12px;\n        }\n\n        .js-compiler-file-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 8px;\n            border-bottom: 1px solid var(--live-editor-border-color);\n            font-size: 14px;\n            background-color: var(--live-editor-button-bg);\n            color: var(--live-editor-text-color);\n        }\n\n        .js-compiler-file-item span {\n            cursor: pointer;\n            flex-grow: 1;\n        }\n\n        .js-compiler-file-item:hover {\n            background-color: var(--live-editor-button-hover-bg);\n        }\n\n        @media (max-width: 768px) {\n            .js-compiler-main-container {\n                flex-direction: column;\n                height: calc(100vh - var(--live-editor-toolbar-height) - var(--live-editor-footer-height) - 8px);\n                gap: 8px;\n            }\n\n            .js-compiler-container:fullscreen .js-compiler-main-container,\n            .js-compiler-container:-webkit-full-screen .js-compiler-main-container,\n            .js-compiler-container:-moz-full-screen .js-compiler-main-container,\n            .js-compiler-container:-ms-fullscreen .js-compiler-main-container {\n                height: calc(100vh - var(--live-editor-toolbar-height) - var(--live-editor-footer-height));\n            }\n\n            .js-compiler-editor-wrapper,\n            .js-compiler-output-wrapper {\n                height: 50%;\n                min-height: 150px;\n                width: auto;\n                flex: none;\n                max-width: none;\n            }\n\n            .js-compiler-divider {\n                display: none;\n            }\n\n            .js-compiler-toolbar {\n                height: 70px;\n                padding: 8px;\n                flex-wrap: nowrap;\n                overflow-x: auto;\n                padding-bottom: 8px;\n                width: 100%;\n            }\n\n            .js-compiler-toolbar-group {\n                flex-direction: row;\n                width: auto;\n                flex-shrink: 0;\n            }\n\n            .js-compiler-toolbar-group.js-compiler-right {\n                margin-left: auto;\n                width: auto;\n                flex-shrink: 0;\n            }\n\n            .js-compiler-toolbar button {\n                font-size: 13px;\n                padding: 7px 10px;\n                width: auto;\n                flex-shrink: 0;\n            }\n\n            .js-compiler-modal-content {\n                width: 95%;\n                padding: 16px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .js-compiler-toolbar {\n                padding: 8px;\n                padding-right: 15px;\n            }\n\n            .js-compiler-toolbar-group.js-compiler-right {\n                margin-left: 0;\n            }\n\n            .js-compiler-toolbar button {\n                width: auto;\n                justify-content: flex-start;\n            }\n\n            .js-compiler-modal-content input,\n            .js-compiler-modal-content button {\n                font-size: 12px;\n            }\n        }\n    <\/style>\n\n    <div class=\"js-compiler-container\">\n        <div class=\"js-compiler-toolbar\">\n            <div class=\"js-compiler-toolbar-group\">\n                <button onclick=\"window.runCode()\" title=\"Run Code\"><span class=\"js-compiler-icon\">\u25b6\ufe0f<\/span> Run<\/button>\n                <button onclick=\"window.lintCode()\" title=\"Lint Code\"><span class=\"js-compiler-icon\">\u2714\ufe0f<\/span> Lint<\/button>\n                <button onclick=\"window.saveCode()\" title=\"Save Code\"><span class=\"js-compiler-icon\">\ud83d\udcbe<\/span> Save<\/button>\n                <button onclick=\"window.loadCode()\" title=\"Load Code\"><span class=\"js-compiler-icon\">\ud83d\udcc2<\/span> Load<\/button>\n                <button onclick=\"window.downloadCode()\" title=\"Download Code\"><span class=\"js-compiler-icon\">\u2b07\ufe0f<\/span> Download<\/button>\n            <\/div>\n            <div class=\"js-compiler-toolbar-group js-compiler-right\">\n                <button id=\"fullscreenBtn\" onclick=\"window.toggleFullscreen()\" title=\"Enter Fullscreen\"><span class=\"js-compiler-icon\"> maximize <\/span> Fullscreen<\/button>\n                <button id=\"themeToggleBtn\" onclick=\"window.toggleTheme()\" title=\"Toggle Theme\"><span id=\"theme-toggle-icon\" class=\"js-compiler-icon\">\ud83c\udf19<\/span> Theme<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"js-compiler-main-container\" id=\"jsCompilerMainContainer\">\n            <div class=\"js-compiler-editor-wrapper\" id=\"jsCompilerEditorWrapper\">\n                <div class=\"js-compiler-editor-pane\">\n                    <div class=\"js-compiler-line-numbers\" id=\"jsCompilerLineNumbers\">1<\/div>\n                    <div id=\"editor\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"js-compiler-divider\" id=\"jsCompilerDivider\"><\/div>\n            <div class=\"js-compiler-output-wrapper\" id=\"jsCompilerOutputWrapper\">\n                <div id=\"output\"><\/div>\n            <\/div>\n        <\/div>\n        <div class=\"js-compiler-footer-info\">\n            <span id=\"jsCompilerScreenSize\">Size: 0x0<\/span>\n            <span id=\"jsCompilerCharCount\">Chars: 0<\/span>\n            <span id=\"jsCompilerWordCount\">Words: 0<\/span>\n        <\/div>\n        <div class=\"js-compiler-modal\" id=\"save-modal\">\n            <div class=\"js-compiler-modal-content\">\n                <h2 id=\"save-code\">Save Code<\/h2>\n                <input type=\"text\" id=\"file-name\" placeholder=\"Enter file name\">\n                <button class=\"js-compiler-save\" onclick=\"window.confirmSave()\">Save<\/button>\n                <button class=\"js-compiler-cancel\" onclick=\"window.closeModal()\">Cancel<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"js-compiler-modal\" id=\"load-modal\">\n            <div class=\"js-compiler-modal-content\">\n                <h2 id=\"load-code\">Load Code<\/h2>\n                <div class=\"js-compiler-file-list\" id=\"file-list\"><\/div>\n                <button class=\"js-compiler-cancel\" onclick=\"window.closeLoadModal()\">Close<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            ace.config.set('basePath', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/');\n            ace.config.set('workerPath', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/');\n            ace.config.set('modePath', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/');\n            ace.config.set('themePath', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/');\n\n            const jshintOptions = {\n                esversion: 11,\n                undef: true,\n                unused: true,\n                asi: false,\n                browser: true,\n                devel: true,\n                latedef: 'nofunc'\n            };\n\n            const sampleCode = `const arr = [1, 2, 3, 4, 5];\nconsole.log(\"Array:\", arr);\nconsole.log(\"Sum:\", arr.reduce((a, b) => a + b, 0));\nconsole.log(\"Filtered (>2):\", arr.filter(x => x > 2));\nconsole.log(\"Mapped (*2):\", arr.map(x => x * 2));\n\n\/\/ Use CTRL + Enter to run code\n\/\/ CTRL + F to find\n\/\/ CTRL + H to replace\n\/\/ CTRL + Z to undo\n\/\/ CTRL + Y to redo\n\/\/ CTRL + \/ to toggle comment\n`;\n\n            \/\/ Debounce function\n            function debounce(func, delay) {\n                let timeout;\n                return function (...args) {\n                    clearTimeout(timeout);\n                    timeout = setTimeout(() => func.apply(this, args), delay);\n                };\n            }\n\n            window.lintCode = function() {\n                const editor = ace.edit(\"editor\");\n                const output = document.getElementById(\"output\");\n                const code = editor.getValue();\n                output.innerHTML = \"\";\n\n                if (\/<[a-z][\\s\\S]*>\/i.test(code)) {\n                    output.innerHTML = `<div class=\"js-compiler-error\">Error: HTML tags detected. Please enter valid JavaScript code only.<\/div>`;\n                    return;\n                }\n                if (code.includes('export ') || code.includes('import ')) {\n                    output.innerHTML = `<div class=\"js-compiler-error\">Error: ES module syntax detected. Please remove export\/import statements.<\/div>`;\n                    return;\n                }\n\n                JSHINT(code, jshintOptions);\n                if (JSHINT.errors.length > 0) {\n                    JSHINT.errors.forEach(error => {\n                        output.innerHTML += `<div class=\"js-compiler-warning\">Line ${error.line}: ${error.reason}<\/div>`;\n                    });\n                } else {\n                    output.innerHTML = `<div class=\"js-compiler-success\">No linting issues found.<\/div>`;\n                }\n            };\n\n            window.runCode = function() {\n                const editor = ace.edit(\"editor\");\n                const output = document.getElementById(\"output\");\n                const code = editor.getValue();\n                output.innerHTML = \"\";\n\n                if (\/<[a-z][\\s\\S]*>\/i.test(code)) {\n                    output.innerHTML = `<div class=\"js-compiler-error\">Error: HTML tags detected. Please enter valid JavaScript code only.<\/div>`;\n                    return;\n                }\n                if (code.includes('export ') || code.includes('import ')) {\n                    output.innerHTML = `<div class=\"js-compiler-error\">Error: ES module syntax detected. Please remove export\/import statements.<\/div>`;\n                    return;\n                }\n\n                JSHINT(code, jshintOptions);\n                if (JSHINT.errors.length > 0) {\n                    JSHINT.errors.forEach(error => {\n                        output.innerHTML += `<div class=\"js-compiler-warning\">Line ${error.line}: ${error.reason}<\/div>`;\n                    });\n                    return;\n                }\n\n                const originalConsoleLog = console.log;\n                const originalConsoleError = console.error;\n                try {\n                    console.log = (...args) => {\n                        output.innerHTML += `<div class=\"js-compiler-success\">${args.join(\" \")}<\/div>`;\n                    };\n                    console.error = (...args) => {\n                        output.innerHTML += `<div class=\"js-compiler-error\">${args.join(\" \")}<\/div>`;\n                    };\n                    const runInSandbox = new Function('console', code);\n                    const result = runInSandbox(console);\n                    if (result !== undefined) {\n                        output.innerHTML += `<div class=\"js-compiler-success\">${result}<\/div>`;\n                    }\n                } catch (error) {\n                    output.innerHTML = `<div class=\"js-compiler-error\">Error: ${error.message}<\/div>`;\n                } finally {\n                    console.log = originalConsoleLog;\n                    console.error = originalConsoleError;\n                }\n            };\n\n            window.saveCode = function() {\n                const saveModal = document.getElementById(\"save-modal\");\n                saveModal.style.display = \"flex\";\n            };\n\n            window.confirmSave = function() {\n                const fileNameInput = document.getElementById(\"file-name\");\n                const editor = ace.edit(\"editor\");\n                const fileName = fileNameInput.value.trim();\n                if (fileName) {\n                    localStorage.setItem(`code_${fileName}`, editor.getValue());\n                    showMessageBox(`Code saved as ${fileName}`);\n                    window.closeModal();\n                } else {\n                    showMessageBox(\"Please enter a file name\");\n                }\n            };\n\n            window.closeModal = function() {\n                const saveModal = document.getElementById(\"save-modal\");\n                const fileNameInput = document.getElementById(\"file-name\");\n                saveModal.style.display = \"none\";\n                fileNameInput.value = \"\";\n            };\n\n            window.loadCode = function() {\n                const fileList = document.getElementById(\"file-list\");\n                const loadModal = document.getElementById(\"load-modal\");\n                fileList.innerHTML = \"\";\n                const savedFiles = Object.keys(localStorage).filter(key => key.startsWith(\"code_\"));\n                if (savedFiles.length === 0) {\n                    fileList.innerHTML = \"<div>No saved files found.<\/div>\";\n                } else {\n                    savedFiles.forEach(key => {\n                        const fileName = key.replace(\"code_\", \"\");\n                        const div = document.createElement(\"div\");\n                        div.className = \"js-compiler-file-item\";\n                        const nameSpan = document.createElement(\"span\");\n                        nameSpan.textContent = fileName;\n                        nameSpan.onclick = () => {\n                            const editor = ace.edit(\"editor\");\n                            editor.setValue(localStorage.getItem(key), -1);\n                            window.closeLoadModal();\n                        };\n                        const deleteButton = document.createElement(\"button\");\n                        deleteButton.className = \"js-compiler-delete\";\n                        deleteButton.textContent = \"Delete\";\n                        deleteButton.onclick = (e) => {\n                            e.stopPropagation();\n                            localStorage.removeItem(key);\n                            window.loadCode();\n                        };\n                        div.appendChild(nameSpan);\n                        div.appendChild(deleteButton);\n                        fileList.appendChild(div);\n                    });\n                }\n                loadModal.style.display = \"flex\";\n            };\n\n            window.closeLoadModal = function() {\n                const loadModal = document.getElementById(\"load-modal\");\n                loadModal.style.display = \"none\";\n            };\n\n            window.downloadCode = function() {\n                const editor = ace.edit(\"editor\");\n                const code = editor.getValue();\n                const encoded = encodeURIComponent(code);\n                const link = document.createElement(\"a\");\n                link.setAttribute(\"href\", `data:text\/javascript;charset=utf-8,${encoded}`);\n                link.setAttribute(\"download\", \"script.js\");\n                link.style.display = \"none\";\n                document.body.appendChild(link);\n                link.click();\n                document.body.removeChild(link);\n                showMessageBox(\"Code downloaded!\");\n            };\n\n            window.toggleTheme = function() {\n                const container = document.querySelector('.js-compiler-container');\n                const themeToggleBtn = document.getElementById('themeToggleBtn');\n                const themeIcon = document.querySelector('#theme-toggle-icon');\n                if (!container || !themeToggleBtn) return;\n                container.classList.toggle('js-compiler-dark-mode');\n                const editor = ace.edit(\"editor\");\n                const isDarkMode = container.classList.contains('js-compiler-dark-mode');\n                localStorage.setItem('jsCompilerTheme', isDarkMode ? 'dark' : 'light');\n                editor.setTheme(isDarkMode ? 'ace\/theme\/monokai' : 'ace\/theme\/textmate');\n                if (themeIcon) {\n                    themeIcon.textContent = isDarkMode ? '\u2600\ufe0f' : '\ud83c\udf19';\n                }\n                themeToggleBtn.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';\n            };\n\n            window.toggleFullscreen = function() {\n                const container = document.querySelector('.js-compiler-container');\n                if (!container) return;\n                if (!document.fullscreenElement) {\n                    if (container.requestFullscreen) {\n                        container.requestFullscreen();\n                    } else if (container.webkitRequestFullscreen) {\n                        container.webkitRequestFullscreen();\n                    } else if (container.mozRequestFullScreen) {\n                        container.mozRequestFullScreen();\n                    } else if (container.msRequestFullscreen) {\n                        container.msRequestFullscreen();\n                    }\n                } else {\n                    if (document.exitFullscreen) {\n                        document.exitFullscreen();\n                    } else if (document.webkitExitFullscreen) {\n                        document.webkitExitFullscreen();\n                    } else if (document.mozCancelFullScreen) {\n                        document.mozCancelFullScreen();\n                    } else if (document.msExitFullscreen) {\n                        document.msExitFullscreen();\n                    }\n                }\n            };\n\n            function updateFullscreenButton() {\n                const fullscreenBtn = document.getElementById('fullscreenBtn');\n                const buttonIcon = fullscreenBtn ? fullscreenBtn.querySelector('.js-compiler-icon') : null;\n                if (!fullscreenBtn || !buttonIcon) return;\n                const isFullscreen = !!document.fullscreenElement;\n                buttonIcon.textContent = isFullscreen ? ' minimize ' : ' maximize ';\n                fullscreenBtn.title = isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen';\n                window.dispatchEvent(new Event('resize'));\n            }\n\n            function updateLineNumbers() {\n                const editor = ace.edit(\"editor\");\n                const lineNumbers = document.getElementById('jsCompilerLineNumbers');\n                if (!editor || !lineNumbers) return;\n                const lines = editor.getValue().split('\\n');\n                const numbers = Array.from({ length: lines.length || 1 }, (_, i) => i + 1).join('\\n');\n                lineNumbers.textContent = numbers;\n            }\n\n            function syncScroll() {\n                const editor = ace.edit(\"editor\");\n                const lineNumbers = document.getElementById('jsCompilerLineNumbers');\n                if (!editor || !lineNumbers) return;\n                lineNumbers.scrollTop = editor.session.getScrollTop();\n            }\n\n            function updateCounts() {\n                const editor = ace.edit(\"editor\");\n                const charCountEl = document.getElementById('jsCompilerCharCount');\n                const wordCountEl = document.getElementById('jsCompilerWordCount');\n                if (!editor || !charCountEl || !wordCountEl) return;\n                const content = editor.getValue();\n                charCountEl.textContent = `Chars: ${content.length}`;\n                const words = content.match(\/\\b\\w+\\b\/g) || [];\n                wordCountEl.textContent = `Words: ${words.length}`;\n            }\n\n            function updateScreenSize() {\n                const output = document.getElementById('output');\n                const screenSizeEl = document.getElementById('jsCompilerScreenSize');\n                if (!output || !screenSizeEl) return;\n                const rect = output.getBoundingClientRect();\n                screenSizeEl.textContent = `Size: ${Math.round(rect.width)}x${Math.round(rect.height)}`;\n            }\n\n            function showMessageBox(message) {\n                const messageBox = document.createElement('div');\n                const container = document.querySelector('.js-compiler-container');\n                let bgColor = '#e9ecef';\n                let textColor = '#34495e';\n                if (container && container.classList.contains('js-compiler-dark-mode')) {\n                    bgColor = '#3a5064';\n                    textColor = '#ffffff';\n                }\n                messageBox.style.cssText = `\n                    position: fixed;\n                    top: 20px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    background-color: ${bgColor};\n                    color: ${textColor};\n                    padding: 10px 20px;\n                    border-radius: 5px;\n                    box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n                    z-index: 1000;\n                    font-family: var(--live-editor-font-family);\n                    font-size: 14px;\n                    opacity: 0;\n                    transition: opacity 0.5s ease-in-out;\n                `;\n                messageBox.textContent = message;\n                document.body.appendChild(messageBox);\n                setTimeout(() => { messageBox.style.opacity = 1; }, 10);\n                setTimeout(() => {\n                    messageBox.style.opacity = 0;\n                    messageBox.addEventListener('transitionend', () => messageBox.remove());\n                }, 3000);\n            }\n\n            document.addEventListener('DOMContentLoaded', function() {\n                const editor = ace.edit(\"editor\");\n                editor.setTheme(\"ace\/theme\/monokai\");\n                editor.session.setMode(\"ace\/mode\/javascript\");\n                editor.setOptions({\n                    fontSize: \"16px\",\n                    showPrintMargin: false,\n                    showGutter: false,\n                    highlightActiveLine: true,\n                    tabSize: 2,\n                    useSoftTabs: true,\n                    useWorker: false,\n                    wrap: true\n                });\n\n                const savedTheme = localStorage.getItem('jsCompilerTheme');\n                const container = document.querySelector('.js-compiler-container');\n                const themeToggleBtn = document.getElementById('themeToggleBtn');\n                const themeIcon = document.querySelector('#theme-toggle-icon');\n                if (container && savedTheme === 'dark') {\n                    container.classList.add('js-compiler-dark-mode');\n                    editor.setTheme('ace\/theme\/monokai');\n                    if (themeIcon) themeIcon.textContent = '\u2600\ufe0f';\n                    if (themeToggleBtn) themeToggleBtn.title = 'Switch to Light Mode';\n                } else {\n                    container.classList.remove('js-compiler-dark-mode');\n                    editor.setTheme('ace\/theme\/textmate');\n                    if (themeIcon) themeIcon.textContent = '\ud83c\udf19';\n                    if (themeToggleBtn) themeToggleBtn.title = 'Switch to Dark Mode';\n                }\n\n                \/\/ Resizing\n                let isResizing = false;\n                const divider = document.getElementById('jsCompilerDivider');\n                const mainContainer = document.getElementById('jsCompilerMainContainer');\n                const editorWrapper = document.getElementById('jsCompilerEditorWrapper');\n                const outputWrapper = document.getElementById('jsCompilerOutputWrapper');\n\n                if (divider && mainContainer && editorWrapper && outputWrapper) {\n                    function startResizing(e) {\n                        isResizing = true;\n                        divider.setPointerCapture(e.pointerId);\n                        document.body.style.cursor = 'col-resize';\n                        document.body.style.userSelect = 'none';\n                        e.preventDefault();\n                    }\n\n                    function resize(e) {\n                        if (!isResizing) return;\n                        const containerRect = mainContainer.getBoundingClientRect();\n                        const newEditorWidth = e.clientX - containerRect.left;\n                        const minWidth = 150;\n                        const maxWidth = containerRect.width - minWidth - divider.offsetWidth;\n                        if (newEditorWidth >= minWidth && newEditorWidth <= maxWidth) {\n                            const editorWidthPercent = (newEditorWidth \/ containerRect.width) * 100;\n                            editorWrapper.style.flex = `0 0 ${editorWidthPercent}%`;\n                            outputWrapper.style.flex = `0 0 ${100 - editorWidthPercent}%`;\n                            updateScreenSize();\n                        }\n                    }\n\n                    function stopResizing(e) {\n                        if (isResizing) {\n                            isResizing = false;\n                            divider.releasePointerCapture(e.pointerId);\n                            document.body.style.cursor = 'auto';\n                            document.body.style.userSelect = '';\n                            updateScreenSize();\n                        }\n                    }\n\n                    divider.addEventListener('pointerdown', startResizing);\n                    document.addEventListener('pointermove', resize);\n                    document.addEventListener('pointerup', stopResizing);\n                }\n\n                \/\/ Load sample code or the first saved file\n                const savedFiles = Object.keys(localStorage).filter(key => key.startsWith(\"code_\"));\n                if (savedFiles.length > 0) {\n                    editor.setValue(localStorage.getItem(savedFiles[0]), -1);\n                } else {\n                    editor.setValue(sampleCode, -1);\n                }\n\n                \/\/ Sync scroll for line numbers\n                editor.session.on('changeScrollTop', syncScroll);\n\n                \/\/ Fullscreen events\n                document.addEventListener('fullscreenchange', updateFullscreenButton);\n                document.addEventListener('webkitfullscreenchange', updateFullscreenButton);\n                document.addEventListener('mozfullscreenchange', updateFullscreenButton);\n                document.addEventListener('MSFullscreenChange', updateFullscreenButton);\n\n                \/\/ Debounced updates\n                const debouncedUpdateLineNumbers = debounce(updateLineNumbers, 50);\n                const debouncedUpdateCounts = debounce(updateCounts, 50);\n                const debouncedUpdateScreenSize = debounce(updateScreenSize, 50);\n\n                editor.session.on('change', () => {\n                    debouncedUpdateLineNumbers();\n                    debouncedUpdateCounts();\n                });\n\n                \/\/ Screen size updates\n                window.addEventListener('resize', debouncedUpdateScreenSize);\n                const output = document.getElementById('output');\n                if (output) {\n                    output.addEventListener('scroll', debouncedUpdateScreenSize);\n                }\n\n                \/\/ Initial setup\n                updateLineNumbers();\n                updateCounts();\n                updateScreenSize();\n                updateFullscreenButton();\n\n                editor.commands.addCommand({\n                    name: \"runCode\",\n                    bindKey: { win: \"Ctrl-Enter\", mac: \"Command-Enter\" },\n                    exec: window.runCode\n                });\n\n                editor.commands.addCommand({\n                    name: \"lintCode\",\n                    bindKey: { win: \"Ctrl-Shift-L\", mac: \"Command-Shift-L\" },\n                    exec: window.lintCode\n                });\n            });\n        })();\n    <\/script>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"http:\/\/schema.org\",\n  \"@type\": \"WebApplication\",\n  \"name\": \"Online JavaScript Compiler Tool\",\n  \"description\": \"A free online JavaScript compiler tool that lets you write, edit, run, and debug JavaScript code with features like syntax highlighting, real-time output preview, and code download.\",\n  \"url\": \"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\",\n  \"applicationCategory\": \"WebDevelopment\",\n  \"operatingSystem\": \"All\",\n  \"softwareVersion\": \"1.0\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"url\": \"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\",\n    \"priceCurrency\": \"USD\",\n    \"price\": \"0.00\",\n    \"eligibleRegion\": {\n      \"@type\": \"Place\",\n      \"name\": \"Global\"\n    }\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Great Learning\",\n    \"url\": \"https:\/\/www.mygreatlearning.com\"\n  },\n  \"screenshot\": \"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png\",\n  \"sameAs\": \"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\",\n  \"featureList\": [\n    \"Real-time JavaScript code editing with enhanced syntax highlighting and auto-completion\",\n    \"Character and word count tracker that updates dynamically as you type\",\n    \"JavaScript output preview pane with real-time updates, displaying console logs, errors, and linting results\",\n    \"Supports JSHint for code linting to identify potential issues before execution\",\n    \"Toolbar Actions: Run code, lint code, save code, load saved code, download code, enter fullscreen, and toggle themes\",\n    \"Code Download: Allows downloading JavaScript code as a .js file with a single click\",\n    \"Save and Load Code: Save code to localStorage, load saved files, and delete unwanted files\",\n    \"Responsive design that adapts to screen size, switching to a stacked layout on smaller screens\",\n    \"Persistent state: Save content in localStorage, persist work between sessions, and load saved or sample code on startup\",\n    \"Light and dark theme toggle, with selected theme persisted using localStorage\",\n    \"New Feature: Displays the output pane size while previewing JavaScript output\",\n    \"Improvements: Enhanced syntax highlighting and autocomplete features\"\n  ],\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\"\n  }\n}\n<\/script>\n\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"online-javascript-editor-and-compiler\">Online JavaScript Editor and Compiler<\/h2>\n\n\n\n<p>This tool allows you to write, edit, run, and debug JavaScript code with ease.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"javascript-compiler-features\">JavaScript Compiler Features<\/h2>\n\n\n\n<p><strong>New Feature<\/strong>: Displays the output pane size while previewing the JavaScript output.<br><strong>Improvements<\/strong>: The code editor now features enhanced syntax highlighting with the Ace Editor and includes autocomplete for improved coding efficiency.<\/p>\n\n\n\n<p>With this JavaScript compiler tool, you can:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"javascript-code-editing\">JavaScript Code Editing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provides a text area for writing and editing JavaScript code, equipped with line numbers for easy navigation.<\/li>\n\n\n\n<li>Supports real-time line number updates that synchronize with scrolling for seamless tracking.<\/li>\n\n\n\n<li>Displays character and word counts that update dynamically as you type.<\/li>\n\n\n\n<li>Allows clearing the editor content to start fresh.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"javascript-output-preview\">JavaScript Output Preview<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Displays the output of the JavaScript code in a dedicated pane.<\/li>\n\n\n\n<li>Updates instantly as the code is executed, showing console logs, errors, or linting results in real-time.<\/li>\n\n\n\n<li>Supports JSHint for code linting to identify potential issues before execution.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toolbar-actions\">Toolbar Actions<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Includes buttons for running code, linting code, saving code, loading saved code, downloading code, entering fullscreen mode, and toggling themes.<\/li>\n\n\n\n<li>Provides quick access to essential actions for efficient workflow.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"themes\">Themes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users can toggle between a light theme (textmate) and a dark theme (monokai) for the editor and output pane.<\/li>\n\n\n\n<li>The selected theme is saved using localStorage for persistence across sessions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"code-download\">Code Download<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users can download the JavaScript code as a .js file with a single button click.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"copy-code\">Copy Code<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript code can be copied to the clipboard using a button (requires implementing the copy functionality, not currently in the provided code).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"save-and-load-code\">Save and Load Code<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users can save their JavaScript code to localStorage with a custom file name via a modal interface.<\/li>\n\n\n\n<li>Saved files can be loaded back into the editor, with an option to delete unwanted files.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fullscreen\">Fullscreen<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Allows maximizing or minimizing the tool for an enhanced coding and previewing experience.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"responsive-design\">Responsive Design<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The editor adapts its layout based on screen size, switching to a stacked layout on smaller screens for better usability.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"persistent-state\">Persistent State<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The content of the editor is saved in localStorage, enabling users to persist and reload their work, with the option to load the first saved file or sample code on startup.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u25b6\ufe0f Run \u2714\ufe0f Lint \ud83d\udcbe Save \ud83d\udcc2 Load \u2b07\ufe0f Download maximize Fullscreen \ud83c\udf19 Theme 1 Size: 0x0 Chars: 0 Words: 0 Save Code Save Cancel Load Code Close Online JavaScript Editor and Compiler This tool allows you to write, edit, run, and debug JavaScript code with ease. JavaScript Compiler Features New Feature: Displays the output [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":108786,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"class_list":["post-107641","page","type-page","status-publish","has-post-thumbnail","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Free Online JavaScript Editor and Compiler<\/title>\n<meta name=\"description\" content=\"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Online JavaScript Compiler\" \/>\n<meta property=\"og:description\" content=\"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1902\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"Online JavaScript Compiler\",\"datePublished\":\"2025-05-27T09:16:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/\"},\"wordCount\":384,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/gl-javascript-compiler.png\",\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/\",\"name\":\"Free Online JavaScript Editor and Compiler\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/gl-javascript-compiler.png\",\"datePublished\":\"2025-05-27T09:16:59+00:00\",\"description\":\"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/gl-javascript-compiler.png\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/gl-javascript-compiler.png\",\"width\":1902,\"height\":896,\"caption\":\"Javascript Compiler\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/javascript-compiler-tool\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Online JavaScript Compiler\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Free Online JavaScript Editor and Compiler","description":"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/","og_locale":"en_US","og_type":"article","og_title":"Online JavaScript Compiler","og_description":"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","og_image":[{"width":1902,"height":896,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@Great_Learning","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"Online JavaScript Compiler","datePublished":"2025-05-27T09:16:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/"},"wordCount":384,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png","articleSection":["IT\/Software Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/","url":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/","name":"Free Online JavaScript Editor and Compiler","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png","datePublished":"2025-05-27T09:16:59+00:00","description":"JavaScript Compiler: Run, lint, save, load, and download JS code. Full-width, responsive editor with sample code for seamless coding.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png","width":1902,"height":896,"caption":"Javascript Compiler"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/javascript-compiler-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Online JavaScript Compiler"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png",1902,896,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-150x150.png",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-300x141.png",300,141,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-768x362.png",768,362,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-1024x482.png",1024,482,true],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-1536x724.png",1536,724,true],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler.png",1902,896,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-640x853.png",640,853,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-96x96.png",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2025\/06\/gl-javascript-compiler-150x71.png",150,71,true]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"\u25b6\ufe0f Run \u2714\ufe0f Lint \ud83d\udcbe Save \ud83d\udcc2 Load \u2b07\ufe0f Download maximize Fullscreen \ud83c\udf19 Theme 1 Size: 0x0 Chars: 0 Words: 0 Save Code Save Cancel Load Code Close Online JavaScript Editor and Compiler This tool allows you to write, edit, run, and debug JavaScript code with ease. JavaScript Compiler Features New Feature: Displays the output&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=107641"}],"version-history":[{"count":69,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107641\/revisions"}],"predecessor-version":[{"id":107833,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/pages\/107641\/revisions\/107833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/108786"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=107641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=107641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=107641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}