Editor Basics

The Odyn editor is a browser-based code environment built on Monaco (the engine behind VS Code). This guide covers the layout, navigation, and core features.

Layout

The editor has four main zones:

Zone	Position	Purpose
Activity bar	Left edge	Switch between views (Explorer, Deploy, Dependencies, etc.)
Sidebar	Left panel	File tree, search, settings (toggle with `Cmd+B`)
Editor panes	Center	Code editing area, supports split views
Status bar	Bottom	Cursor position, language, encoding, errors, unsaved files

Split Panes

Split the editor to view multiple files side by side.

Action	Shortcut
Split horizontal (side by side)	`Cmd+\`
Split vertical (stacked)	`Cmd+Shift+\`
Resize pane left	`Ctrl+Shift+←` (planned)
Resize pane right	`Ctrl+Shift+→` (planned)
Resize pane up	`Ctrl+Shift+↑` (planned)
Resize pane down	`Ctrl+Shift+↓` (planned)

Each pane maintains its own open tabs and selected file. Drag tabs between panes to move files.

Command Palette

Press Cmd+Shift+P to open the command palette. It lists all available commands grouped by category, with keyboard shortcuts shown inline. Type to filter.

Quick Open

Press Cmd+P to fuzzy-search files by name. Select a result and press Enter to open the file in the active pane.

Go to Line

Press Cmd+G to jump to a specific line number. Enter a number (e.g., 42 or :42) and press Enter.

Problems Panel

Press Cmd+Shift+M to toggle the problems panel. It displays TypeScript, ESLint, and CSS diagnostics grouped by file. Click a diagnostic to navigate to the error location.

Diagnostics are color-coded by source:

Source	Badge Color
TypeScript	Blue
ESLint	Purple
CSS	Orange
Odyn	Yellow

Code Formatting

Press Cmd+Shift+F to format the current file using the Monaco built-in formatter. Format-on-save is configurable in editor settings (Cmd+,).

Editor Settings

Press Cmd+, to open settings. Configurable options:

Font size and tab size (2, 4, or 8 spaces)
Word wrap toggle
Minimap toggle
Indent type (spaces or tabs)
Line endings (LF or CRLF)
Encoding (UTF-8, ASCII, ISO-8859-1, UTF-16 LE, UTF-16 BE)
Theme selection (see below)

Themes

Select a theme from editor settings:

Dark (default)
Light
High Contrast
System (follows OS preference)
Monokai, Solarized Dark, Solarized Light, Abyss, Kimbie Dark

Status Bar

The status bar at the bottom displays:

Cursor position (line:column)
Language mode with auto-detection (click to override)
Indentation type and size
Encoding and line endings
Problems count (errors and warnings)
Unsaved files indicator

File Tabs

Single-click a file in the tree to open in preview mode (italic tab title, replaced by next preview).
Double-click or press Enter from Quick Open to pin the tab (regular title, stays open).
Right-click a tab for options: Close, Close Others, Move to Left/Right Pane.

Key Shortcuts

For the full shortcut table, see Keyboard Shortcuts.

Shortcut	Action
`Cmd+S`	Save current file
`Cmd+B`	Toggle sidebar
`Cmd+P`	Quick Open
`Cmd+Shift+P`	Command palette
`Cmd+G`	Go to line
`Cmd+Shift+M`	Toggle problems panel
`Cmd+Shift+F`	Format document
`Cmd+\`	Split horizontal
`Cmd+Shift+\`	Split vertical
`Cmd+,`	Editor settings

Verification

Open the editor and confirm:

Cmd+Shift+P opens the command palette with searchable commands.
Cmd+P lists project files by name.
Cmd+\ splits the editor into two side-by-side panes.
Cmd+Shift+M opens the problems panel at the bottom.
Saving a file (Cmd+S) triggers format-on-save if enabled.

On this page