Ivan Santoso
description

VBScript Editor

Edit .vbs / classic ASP-style snippets and preview the surrounding HTML.

Note: VBScript is not executed in modern browsers. Only HTML/CSS is rendered.

The HTML layout still renders correctly in the preview.

`; function vbGetCode() { return vbEditorInstance ? vbEditorInstance.getValue() : vbInitialCode; } function vbUpdatePreview() { const code = vbGetCode(); const doc = vbPreviewFrame.contentDocument || vbPreviewFrame.contentWindow.document; // Just write the code as-is; browser will ignore VBScript blocks doc.open(); doc.write(code); doc.close(); } function vbHandleContentChange() { clearTimeout(vbDebounceTimer); vbDebounceTimer = setTimeout(() => { if (vbLiveToggle.checked) { vbUpdatePreview(); } }, 400); } vbLiveToggle.addEventListener('change', () => { vbRenderBtn.disabled = vbLiveToggle.checked; if (vbLiveToggle.checked) { vbUpdatePreview(); } }); vbRenderBtn.addEventListener('click', vbUpdatePreview); // Initial preview fallback vbUpdatePreview(); // Configure Monaco loader require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' } }); // Worker config window.MonacoEnvironment = { getWorkerUrl: function () { const base = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/'; const code = ` self.MonacoEnvironment = { baseUrl: '${base}' }; importScripts('${base}vs/base/worker/workerMain.min.js'); `; return 'data:application/javascript;charset=utf-8,' + encodeURIComponent(code); } }; // Initialize Monaco require(['vs/editor/editor.main'], function () { const isDark = document.documentElement.classList.contains('dark'); vbEditorInstance = monaco.editor.create(vbEditorContainer, { value: vbInitialCode.trimStart(), language: 'vb', automaticLayout: true, minimap: { enabled: false }, wordWrap: 'on', fontSize: 14, theme: isDark ? 'vs-dark' : 'vs' }); vbEditorInstance.onDidChangeModelContent(vbHandleContentChange); // Initial preview once Monaco is ready vbUpdatePreview(); });