> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Editor

> VS Code-quality editing inside Hiveku Builder

The Hiveku code editor is built on [Monaco](https://microsoft.github.io/monaco-editor/) -- the same engine that powers VS Code. You get syntax highlighting, autocomplete, and all the editing features you'd expect, right in your browser.

## Opening the editor

Click **Code Editor** from any project dashboard, or click a file in the sidebar to open it directly.

## Layout

The editor uses a split-panel layout:

* **Left panel** -- AI chat for natural language coding
* **Center panel** -- the code editor with tabs for open files
* **Right panel** -- live preview of your site

You can resize panels by dragging the dividers, or collapse the chat or preview to focus on code.

## Language support

| Category          | Languages                                                              |
| ----------------- | ---------------------------------------------------------------------- |
| **Web**           | HTML, CSS, JavaScript, TypeScript, JSX, TSX, SCSS, LESS, Markdown, MDX |
| **Data / Config** | JSON, YAML, TOML, XML, ENV, SQL                                        |
| **Other**         | Python, PHP, Ruby, Go, Rust, C, C++, Java, Shell, Dockerfile           |

## Editor features

* **Syntax highlighting** for all supported languages
* **Autocomplete** with IntelliSense-style suggestions
* **Minimap** for quick navigation in long files
* **Word wrap** toggle for horizontal scrolling preference
* **Format on paste** to auto-indent pasted code
* **Format on type** for automatic formatting as you write

## Keyboard shortcuts

| Shortcut                       | Action                 |
| ------------------------------ | ---------------------- |
| `Ctrl+S` / `Cmd+S`             | Save file              |
| `Ctrl+P` / `Cmd+P`             | Quick file open        |
| `Ctrl+Shift+P` / `Cmd+Shift+P` | Command palette        |
| `Ctrl+F` / `Cmd+F`             | Find in file           |
| `Ctrl+H` / `Cmd+H`             | Find and replace       |
| `Ctrl+Z` / `Cmd+Z`             | Undo                   |
| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo                   |
| `Alt+Up` / `Option+Up`         | Move line up           |
| `Alt+Down` / `Option+Down`     | Move line down         |
| `Ctrl+D` / `Cmd+D`             | Select next occurrence |

## File mention in AI chat

Type `@` followed by a filename in the AI chat to reference a specific file. This focuses the AI's attention on that file when generating responses.

```
Refactor the layout in @components/header.html to use flexbox
```