# Code Editor

Nimbalyst includes a full-featured code editor powered by Monaco (the same editor used in VS Code). When you open a code file, it automatically opens in Monaco with syntax highlighting and standard editing features.

<figure><img src="/files/zyaZPcoRNkm6v7PhQ400" alt=""><figcaption></figcaption></figure>

### Reviewing AI Changes

When the AI edits a code file, you'll see an inline diff view:

When the AI edits code or a a document, changes appear inline:

* Green background: Added content
* Red background: Removed content (with strikethrough)

Navigation

* Previous/Next buttons: Jump between changes in the file
* Change counter: Shows how many changes are in the diff (e.g., "Change 2 of 5")

Accept/Reject:

* Accept All: Keeps all changes
* Reject All: Reverts to original content

Changes remain visible until you accept or reject them.<br>

### Supported File Types

The code editor supports a wide range of programming languages:

#### Web Development

* JavaScript: `.js`, `.jsx`, `.mjs`, `.cjs`
* TypeScript: `.ts`, `.tsx`, `.d.ts`
* HTML: `.html`, `.htm`
* CSS: `.css`, `.scss`, `.sass`, `.less`

#### Data Formats

* JSON: `.json`, `.jsonc`
* YAML: `.yaml`, `.yml`
* XML: `.xml`
* TOML: `.toml`

#### Programming Languages

* Python: `.py`, `.pyw`, `.pyi`
* Go: `.go`
* Rust: `.rs`
* C/C++: `.c`, `.h`, `.cpp`, `.cc`, `.hpp`
* Java: `.java`
* C#: `.cs`
* Swift: `.swift`
* Kotlin: `.kt`
* Ruby: `.rb`
* PHP: `.php`

#### Shell & Config

* Shell scripts: `.sh`, `.bash`, `.zsh`, `.fish`
* SQL: `.sql`
* GraphQL: `.graphql`
* Dockerfile

#### Other

* Markdown: `.md` (raw view mode)
* Plain text: `.txt`, `.log`

### Editor Features

#### Syntax Highlighting

Each language gets appropriate color highlighting, making code easy to read and understand.

#### Line Numbers

Line numbers appear on the left side for easy navigation and referenc

#### Minimap

A code overview appears on the right side, letting you see the structure of longer files and quickly jump to different sections.

#### Code Folding

Click the arrows next to code blocks to collapse or expand them. Works with:

* Functions and methods
* Classes
* Conditional blocks
* Loops
* JSON objects and arrays

#### Bracket Matching

Matching brackets, braces, and parentheses are highlighted in color, making it easy to see paired delimiters.

### Editing Code

#### Autosave

Changes save automatically after 2 seconds of inactivity. A dot in the tab title indicates unsaved changes.

#### Manual Save

Press **Cmd+S** (Mac) or **Ctrl+S** (Windows/Linux) to save immediately.

All common editing shortcuts work:

* **Cmd/Ctrl+C**: Copy
* **Cmd/Ctrl+V**: Paste
* **Cmd/Ctrl+Z**: Undo
* **Cmd/Ctrl+Shift+Z**: Redo
* **Cmd/Ctrl+F**: Find
* **Cmd/Ctrl+H**: Find and replace

#### Indentation

The editor uses 2-space indentation by default and automatically detects the indentation style of existing files.

### File Watching

The editor detects when files are changed by other programs:

* If you have no unsaved changes, the file reloads automatically
* If you have unsaved changes, you'll be prompted to keep your version or reload the external changes

### File History

Code file edits are tracked in your file history:

* Press **Cmd+Y** (Mac) or **Ctrl+Y** (Windows/Linux) to open file history
* Restore any previous version of the file
* See when changes were made

### Tips

* **Hover for full path**: Hover over a tab to see the complete file path
* **Multiple files**: Open code and markdown files side by side in tabs
* **Theme support**: The editor automatically matches your Nimbalyst theme (light/dark)
* **Focus indicator**: When you click elsewhere and return, your cursor position is preserved


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nimbalyst.com/visual-editors-powered-by-ai/code-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.