Code Editor

IndigiCoder includes a powerful code editor powered by Monaco (the same editor used in VS Code). You can view, edit, and save your code directly.

Editor Features

• Syntax Highlighting — Full color coding for JavaScript, TypeScript, CSS, HTML, JSON, Python, and more
• File Explorer — VS Code-style file tree with folders and files
• Multiple File Tabs — Open and switch between files easily
• IntelliSense — Auto-completion and parameter hints
• Search & Replace — Find text across your file (Ctrl+F)
• Code Folding — Collapse code blocks for easier navigation
• Minimap — Code overview on the right side
• 25+ Themes — VS Dark, Dracula, GitHub, Monokai, and more

Editing Your Code

You can manually edit any file in your project:

1. Click on a file in the file explorer or tabs
2. Edit the code directly in the editor
3. Unsaved changes are marked with a yellow dot
4. Save with the Save button or Ctrl+S

Keyboard Shortcuts

Editor Settings

Click the gear icon (⚙️) to access editor settings:

• Theme — Choose from 25+ color themes
• Font Size — Adjust from 10px to 24px
• Tab Size — 2, 4, or 8 spaces
• Word Wrap — Toggle line wrapping
• Auto-Save — Automatically save after editing
• Minimap — Show/hide code overview
• Line Numbers — Show/hide line numbers
• IntelliSense — Toggle auto-completion
• Bracket Colors — Colorize matching brackets
• Smooth Scrolling — Enable smooth scroll animation

All settings are saved to your browser and persist across sessions.

Supported Languages

The editor supports syntax highlighting for:

• JavaScript / TypeScript (.js, .jsx, .ts, .tsx)
• HTML / CSS / SCSS (.html, .css, .scss)
• JSON / Markdown (.json, .md)
• Python / PHP / SQL (.py, .php, .sql)
• And more...

Working with AI Generation

When AI is generating code:

• Files update in real-time as they're created
• A blue dot indicates files being actively generated
• You can edit files after generation completes
• Use follow-up prompts to make AI modify specific files

Learn Mode

The code editor includes a built-in Learn Mode that turns any file into an interactive learning experience. It's perfect for understanding code that was generated for you, or for brushing up on concepts you're not familiar with.

Enabling Learn Mode

Click the Learn button in the code editor toolbar (top-right). When active, the button glows purple and the editor enters learning mode.

What Happens When You Enable It

IndigiCoder automatically analyzes the current file and highlights key areas with colored dots in the editor gutter:

• Purple dots — Imports, effects, and side effects
• Blue dots — Types, interfaces, and state
• Green dots — Components, handlers, and functions
• Amber dots — Complex logic and algorithms

A chat panel appears in the left sidebar where you can interact with IndigiCoder.

Asking Questions

You can ask anything about the code in the chat input. IndigiCoder will explain concepts in simple, beginner-friendly language and reference specific lines in the editor. Click on a line reference to jump straight to that code.

Suggested prompts are shown as clickable chips after each response — use these to dive deeper into specific topics.

Interactive Challenges

Type "challenge me" or click the Challenge chip to get a hands-on coding challenge based on the current file. Challenges include:

• A mini sandbox editor where you fill in code on TODO lines
• Real-time feedback showing which lines are correct
• Progressive hints if you get stuck
• Difficulty levels: beginner, intermediate, and advanced

Read Aloud

Every response includes a Read aloud button that uses your browser's text-to-speech to read the explanation. You can toggle between male and female voices using the M/F button next to it.