Skip to main content

​
Web IaC Editor

Edit Your Infrastructure as Code Directly in the Browser Cloudeval’s built-in web editor lets you edit ARM templates and Bicep files directly in your browser with syntax highlighting, auto-completion, error detection, and real-time diagram updates.

​
Overview

The Web IaC Editor provides:
  • Syntax Highlighting - Color-coded ARM and Bicep syntax
  • Auto-Completion - Intelligent code completion
  • Error Detection - Real-time validation and error highlighting
  • Multi-File Support - Edit multiple files in tabs
  • Real-Time Updates - See diagram changes as you edit
  • Format & Validate - Format code and validate templates
  • Export Changes - Download updated files

​
Features

​
Syntax Highlighting

Full syntax highlighting for:
  • ARM Templates - JSON syntax with ARM-specific highlighting (Available now)
  • Bicep Files - Bicep syntax with resource highlighting (Coming Early Feb 2026 - View roadmap)
  • Parameter Files - Parameter-specific syntax
  • Linked Templates - Template reference highlighting
Highlights:
  • Resource types and properties
  • Functions and expressions
  • Parameters and variables
  • Comments and documentation
  • Strings, numbers, and booleans

​
Auto-Completion

Intelligent code completion: For ARM Templates:
  • Resource types and API versions
  • Property names and values
  • Template functions
  • Parameter references
  • Variable references
For Bicep Files:
  • Resource declarations
  • Module references
  • Built-in functions
  • Decorators and metadata
  • Output definitions
Trigger: Press Ctrl+Space (or Cmd+Space on Mac) for suggestions

​
Error Detection

Real-time validation: Detects:
  • Syntax errors (JSON, Bicep)
  • Missing required properties
  • Invalid resource configurations
  • Type mismatches
  • Reference errors
Error Display:
  • Red squiggly lines under errors
  • Error messages on hover
  • Error list in panel
  • Quick fixes for common issues

​
Multi-File Editing

Edit multiple files simultaneously: Features:
  • Tabbed interface for multiple files
  • Switch between files easily
  • See all open files
  • Save all or individual files
  • Close tabs individually
Supported:
  • Main templates
  • Linked templates
  • Parameter files
  • Module files (Bicep)

​
Real-Time Diagram Updates

See changes instantly:
  1. Edit code in the editor
  2. Save changes (auto-save or manual)
  3. Diagram updates automatically
  4. View changes in real-time
Update Modes:
  • Auto - Updates on save
  • Manual - Click “Refresh Diagram”
  • Live - Updates as you type (optional)

​
Format & Validate

Built-in formatting and validation: Format Code:
  • Auto-format JSON (ARM templates)
  • Format Bicep files
  • Indentation and spacing
  • Consistent style
Validate Templates:
  • Check syntax
  • Validate resource properties
  • Verify parameter types
  • Check references
Commands:
  • Shift+Alt+F - Format document
  • Ctrl+Shift+P - Command palette
  • “Format Document” - Format current file
  • “Validate Template” - Run validation

​
Using the Editor

​
Opening the Editor

  1. Upload a template or open existing project
  2. Click “Edit Code” button
  3. Editor opens in split view or full screen
  4. Start editing your Infrastructure as Code

​
Editing Code

Basic Editing:
  • Type to add code
  • Use standard shortcuts (Ctrl+C, Ctrl+V, etc.)
  • Undo/Redo with Ctrl+Z / Ctrl+Y
  • Find/Replace with Ctrl+F
Advanced Features:
  • Multi-cursor editing (Alt+Click)
  • Column selection (Shift+Alt+Drag)
  • Go to line (Ctrl+G)
  • Go to symbol (Ctrl+Shift+O)

​
Saving Changes

Save Options:
  • Auto-Save - Automatically saves as you type
  • Manual Save - Ctrl+S to save
  • Save All - Save all open files
  • Save As - Save with new name
After Saving:
  • Changes are applied to diagram
  • Validation runs automatically
  • Errors are highlighted
  • Success notification appears

​
Exporting Changes

Download updated files:
  1. Make changes in editor
  2. Save changes
  3. Click “Export” or “Download”
  4. Choose files to download
  5. Files download to your computer

​
Editor Shortcuts

  • Ctrl+G - Go to line
  • Ctrl+P - Quick open file
  • Ctrl+Shift+O - Go to symbol
  • F12 - Go to definition
  • Shift+F12 - Find all references

​
Editing

  • Ctrl+Space - Trigger auto-completion
  • Shift+Alt+F - Format document
  • Ctrl+/ - Toggle line comment
  • Shift+Alt+A - Toggle block comment
  • Alt+Up/Down - Move line up/down

​
Selection

  • Ctrl+D - Select next occurrence
  • Ctrl+Shift+L - Select all occurrences
  • Alt+Click - Add cursor
  • Ctrl+Alt+Up/Down - Add cursor above/below

​
View

  • Ctrl+B - Toggle sidebar
  • Ctrl+\ - Split editor
  • F11 - Toggle full screen
  • Ctrl+ - Zoom in
  • Ctrl- - Zoom out

​
Best Practices

​
Code Organization

  • Use Comments - Document complex logic
  • Consistent Formatting - Use format command regularly
  • Modular Structure - Break into linked templates/modules
  • Clear Naming - Use descriptive names

​
Validation

  • Validate Often - Check for errors frequently
  • Fix Errors First - Address errors before continuing
  • Test Changes - Verify diagram updates correctly
  • Review Before Export - Double-check before downloading

​
Collaboration

  • Use Comments - Add comments for team members
  • Version Control - Export and commit changes
  • Share Changes - Use collaboration features
  • Document Changes - Note what changed and why

​
Limitations

​
Current Limitations

  • Browser-Based - Requires internet connection
  • File Size - Very large files may be slow
  • Offline Mode - Limited offline functionality
  • Advanced Features - Some IDE features not available

​
Coming Soon

  • Offline Editing - Full offline support
  • Git Integration - Direct Git commit/push
  • Advanced Refactoring - Code refactoring tools
  • Custom Snippets - User-defined code snippets

​
Troubleshooting

​
Editor Won’t Open

Problem: Editor doesn’t open when clicking “Edit Code” Solutions:
  • Refresh the page
  • Check browser console for errors
  • Try different browser
  • Clear browser cache

​
Auto-Completion Not Working

Problem: Code completion doesn’t appear Solutions:
  • Press Ctrl+Space manually
  • Check if language is detected correctly
  • Verify file extension (.json, .bicep)
  • Refresh editor

​
Changes Not Saving

Problem: Changes are lost after refresh Solutions:
  • Enable auto-save
  • Manually save with Ctrl+S
  • Check browser storage permissions
  • Export changes before closing

​
Diagram Not Updating

Problem: Diagram doesn’t reflect code changes Solutions:
  • Save the file (Ctrl+S)
  • Click “Refresh Diagram”
  • Check for syntax errors
  • Validate template

​
Next Steps

Need help? Contact support or join our community