Editor
A powerful web-based code editor built for Algorand smart contract development.
Overview
The AVM Studio editor is built on Monaco (the same editor that powers VS Code), providing a familiar and powerful editing experience directly in your browser.
Syntax Highlighting
Full support for TypeScript, Python, and TEAL with smart colorization
IntelliSense
Auto-completion, parameter hints, and inline documentation
Multi-File Projects
Organize code across multiple files and folders
Integrated Build
Compile contracts with one click or keyboard shortcut
Editor Layout
The editor interface consists of several key areas:
- File Tree (Left) - Navigate and manage project files
- Editor Tabs (Center) - Open multiple files simultaneously
- Code Editor (Center) - Write and edit your code
- Build Panel (Right/Bottom) - View build status and logs
- Preview Panel (Right) - See generated TEAL code
- Ghost Panel (Right) - Run tests without deployment
File Management
Creating Files
- Right-click in the file tree and select New File
- Or click the + icon in the file tree header
- Enter a filename with the appropriate extension (.algo.ts, .py, .teal)
Creating Folders
- Right-click in the file tree and select New Folder
- Organize related files into logical groups
Renaming & Deleting
- Right-click on a file or folder for context menu options
- Or select and press F2 to rename
- Press Delete or Backspace to delete (with confirmation)
Editing Features
Auto-Completion
Press Ctrl/Cmd + Space to trigger suggestions. The editor provides:
- Algorand TypeScript/Python API completions
- Local variable and function suggestions
- Import suggestions
Go to Definition
Ctrl/Cmd + Click on a symbol to jump to its definition.
Find & Replace
- Ctrl/Cmd + F - Find in current file
- Ctrl/Cmd + H - Find and replace
- Ctrl/Cmd + Shift + F - Find in all files
Multi-Cursor Editing
- Alt + Click - Add cursor at click position
- Ctrl/Cmd + Alt + Up/Down - Add cursor above/below
- Ctrl/Cmd + D - Select next occurrence
Building Contracts
To compile your smart contract:
- Click the Build button in the toolbar
- Or press Ctrl/Cmd + B
The build panel shows:
- Status - Success or failure indicator
- Logs - Detailed compilation output
- Errors - Clickable error messages that jump to source
- Artifacts - Generated TEAL and ABI files
TEAL Preview
The Preview panel shows the generated TEAL code after a successful build. This is useful for:
- Understanding how your high-level code compiles
- Debugging compilation issues
- Learning TEAL patterns
- Optimizing contract size