Interactive Code Editor

Editor kode profesional dengan 50+ fitur untuk meningkatkan produktivitas coding Anda

10 Kategori Fitur 6 Templates 12 Shortcuts
NAVIGATION

Fitur-Fitur Utama

Enhanced Code Execution
  • Run All (HTML/CSS/JS)
  • Run JS Separately
  • Console Capture
  • Error Tracking
File Management
  • Create New File
  • Rename File
  • Delete File
  • Auto Save
Advanced Editor
  • Monaco Editor (VS Code)
  • Syntax Highlighting
  • Auto-complete
  • Code Folding
Console & Output
  • Multiple Tabs
  • Colored Output
  • Timestamps
  • Error Counter
Templates Library
  • HTML Basic
  • CSS Styling
  • JavaScript Interactive
  • Bootstrap, DOM, API/Fetch
Code Snippets
  • HTML Snippets
  • CSS Snippets
  • JavaScript Snippets
  • Quick Insert

Cara Penggunaan

Basic Usage
  1. Buka editor-improved.html di browser
  2. Pilih file di File Tree (kolom kiri)
  3. Edit kode di Editor (kolom tengah)
  4. Klik Run All untuk preview HTML/CSS
  5. Klik Run JS untuk execute JavaScript
File Management
  • Create: Klik tombol di File Tree
  • Rename: Hover file, klik icon
  • Delete: Hover file, klik icon
  • Switch: Klik nama file untuk switch
Templates & Snippets

Templates:

  • Klik salah satu template card di bagian atas
  • Template akan load otomatis dengan preview

Code Snippets:

  • Klik tombol "Code Snippets"
  • Browse snippets by category
  • Klik "Insert" untuk insert ke editor

Keyboard Shortcuts

Editor Shortcuts
Format Code Shift + Alt + F
Find Ctrl + F
Replace Ctrl + H
Undo Ctrl + Z
Redo Ctrl + Y
Select All Ctrl + A
Action Shortcuts
Run Code Ctrl + Enter
Save Ctrl + S
Comment Line Ctrl + /
Duplicate Line Shift + Alt + ↓
Delete Line Ctrl + Shift + K
Multi-cursor Alt + Click

Available Templates

HTML Basic

Template HTML dasar dengan semantic tags

CSS Styling

Modern CSS dengan gradients & animations

JavaScript

Counter, color changer, dan interaktif

Bootstrap

Template dengan Bootstrap components

DOM Manipulation

Add, remove, clear items dengan DOM

API/Fetch

Fetch data dari API dengan async/await

Tips & Tricks

Multi-cursor Editing

Hold Alt dan click untuk create multiple cursors. Berguna untuk edit di beberapa tempat sekaligus!

Quick Format

Gunakan Shift + Alt + F untuk format code secara otomatis dengan indentation yang benar.

Find & Replace

Tekan Ctrl + H untuk find and replace. Berguna untuk rename variables atau class names.

Duplicate Line

Gunakan Shift + Alt + ↓ untuk duplicate current line dengan cepat.

Quick Comment

Tekan Ctrl + / untuk toggle comment pada selected lines.

Technical Details

Architecture
  • Frontend: Vanilla JavaScript (ES6+)
  • Editor: Monaco Editor (VS Code editor)
  • UI Framework: Bootstrap 5
  • Icons: Font Awesome 6
  • Storage: LocalStorage untuk persistence
File Structure
editor-improved.html # Main HTML file
js/
├── editor-enhanced.js # Main JavaScript engine
└── main.js # Original main.js
css/
└── style.css # Styles
Key Classes
  • CodeEditor: Main class yang handle semua functionality
  • File Management: renderFileTree(), switchFile(), addNewFile()
  • Code Execution: runCode(), runJavaScript()
  • Console: logConsole(), logError(), clearConsole()
  • Templates: loadTemplate(), getTemplates()

Siap Mencoba?

Buka Code Editor
Kembali ke Home