IDE Features
Editor shortcuts, file explorer, panel layout, and code intelligence in the playground.
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, andprove. - 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
.achfiles, 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 |