IDE Features

The playground mirrors the experience of a desktop IDE. This page covers all the features available.

Keyboard shortcuts

Shortcut	Action
Ctrl+Enter	Run the project
Ctrl+S	Save the active file
Ctrl+B	Toggle sidebar (file explorer)
Ctrl+`	Toggle terminal/output panel
Ctrl+J	Toggle terminal/output panel (alternative)
Tab	Indent selection
Middle-click tab	Close tab

On macOS, use Cmd instead of Ctrl.

Editor

The editor is built on CodeMirror 6 with:

• Achronyme syntax highlighting (same TextMate grammar as VS Code)
• Bracket matching and auto-closing
• Line numbers and active line highlighting
• Selection highlighting and search
• Line wrapping
• One Dark theme

Code intelligence

All code intelligence runs locally in the browser via WASM:

• Diagnostics — syntax and compiler errors appear as red underlines within 300ms of typing. Hover over an underlined token to see the error message.
• Autocompletion — type the first few letters of a keyword, builtin, or method and the completion list appears. Includes snippets for common patterns like for, if, and prove.
• Hover docs — hover over any keyword or builtin function to see its documentation, signature, and examples.

File explorer

The sidebar shows your project files in a tree view, grouped by directory.

• Click a file to open it in a new tab
• Double-click a file name to rename it inline
• Right-click a file for the context menu (Rename, Delete)
• The active file is highlighted in blue

New files

Click the + button in the Explorer header to create a new file. Enter the full path (e.g., src/utils.ach) — directories are created automatically.

Only .ach files and achronyme.toml are allowed. The achronyme.toml file cannot be renamed or deleted.

Tabs

Open files appear as tabs in the tab bar. Tabs show:

• A purple diamond icon for .ach files, a gray icon for .toml
• A dot indicator when the file has unsaved changes
• A close button on hover (or middle-click to close)

Files are auto-saved 1 second after you stop typing.

Panel layout

The output panel can be positioned at the bottom (default) or to the right of the editor.

• Click the layout toggle button in the panel header to switch positions
• Drag the resize handle between the editor and panel to adjust the split
• Close the panel with the x button or Ctrl+`. It reopens automatically when you run code.

The sidebar is also resizable — drag its right edge to adjust the width (150–500px).

Status bar

The bottom status bar shows:

Item	Description
Server	Connection status (green = connected, yellow = running, red = offline)
LSP	Whether WASM-based code intelligence is loaded
Ln, Col	Current cursor position
Achronyme	Language identifier
UTF-8	File encoding