Online Code Editor

Write, format, and download code entirely in your browser memory. Supports HTML, CSS, JS, Python, and more.

\n \n

Hello, ToolTari!

\n\n`, css: `/* CSS Template */\n\nbody {\n font-family: sans-serif;\n background: #f8fafc;\n color: #0f172a;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}`, python: `# Python Code Template\n\ndef greet(name):\n print(f"Hello, {name}!")\n\ngreet("ToolTari")`, json: `{\n "projectName": "ToolTari Code Workspace",\n "version": "1.0.0",\n "description": "Secure client-side coding environments",\n "private": true\n}`, typescript: `// TypeScript Code Template\n\ninterface User {\n name: string;\n id: number;\n}\n\nconst user: User = {\n name: "ToolTari",\n id: 1\n};\nconsole.log(user);`, markdown: `# Markdown Documentation\n\n## ToolTari Online Editor\n- 100% Private\n- Client-Side Executions\n- Light and Dark modes` }; const fileExtensions = { javascript: 'js', html: 'html', css: 'css', python: 'py', json: 'json', typescript: 'ts', markdown: 'md' }; document.addEventListener('DOMContentLoaded', () => { const selectLang = document.getElementById('editorLang'); const selectTheme = document.getElementById('editorTheme'); const btnFormat = document.getElementById('btnFormat'); const btnDownload = document.getElementById('btnDownload'); const btnClear = document.getElementById('btnClear'); const btnUploadTrigger = document.getElementById('btnUploadTrigger'); const fileImporter = document.getElementById('fileImporter'); let currentLang = 'javascript'; // Load Monaco Editor require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' } }); require(['vs/editor/editor.main'], function () { // Initialize Editor window.editor = monaco.editor.create(document.getElementById('editorContainer'), { value: defaultTemplates.javascript, language: 'javascript', theme: 'vs-dark', automaticLayout: true, fontSize: 14, fontFamily: "'Fira Code', 'Courier New', monospace", minimap: { enabled: true }, tabSize: 2 }); // Track when file editor successfully loads ToolTariUI.addHistoryEntry('Code Editor', 'Open empty editor', 'Editor Workspace Loaded'); // Language change event selectLang.addEventListener('change', () => { currentLang = selectLang.value; const model = window.editor.getModel(); monaco.editor.setModelLanguage(model, currentLang); window.editor.setValue(defaultTemplates[currentLang] || ''); }); // Theme change event selectTheme.addEventListener('change', () => { monaco.editor.setTheme(selectTheme.value); }); // Format action event btnFormat.addEventListener('click', () => { window.editor.getAction('editor.action.formatDocument').run(); }); // Clear editor action btnClear.addEventListener('click', () => { if (confirm('Clear all contents of the editor?')) { window.editor.setValue(''); } }); // File upload trigger btnUploadTrigger.addEventListener('click', () => { fileImporter.click(); }); fileImporter.addEventListener('change', () => { const file = fileImporter.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (e) => { window.editor.setValue(e.target.result); // Try to auto-resolve language by file extension const ext = file.name.split('.').pop().toLowerCase(); const langEntry = Object.keys(fileExtensions).find(key => fileExtensions[key] === ext); if (langEntry) { selectLang.value = langEntry; currentLang = langEntry; const model = window.editor.getModel(); monaco.editor.setModelLanguage(model, currentLang); } ToolTariUI.addHistoryEntry('Code Editor', `Open file: ${file.name}`, `Imported successfully (${file.size} bytes)`); }; reader.readAsText(file); }); // File download action btnDownload.addEventListener('click', () => { const codeVal = window.editor.getValue(); if (!codeVal) { ToolTariUI.showError('Editor is empty. Cannot download empty file.'); return; } const blob = new Blob([codeVal], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const ext = fileExtensions[currentLang] || 'txt'; const filename = `tooltari_script.${ext}`; const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); // Log to history ToolTariUI.addHistoryEntry('Code Editor', `Download code as ${ext.toUpperCase()}`, `File: ${filename}`); }); }); });