Code Editor

The Code Editor is a powerful Monaco-based code editing environment with AI-powered analysis, GitHub integration, and real-time collaboration features.

Overview

Access the Code Editor from the ReformCode page by selecting the Code Editor tab. It provides:

• Monaco Editor: VS Code's editor engine with full IntelliSense
• AI Analysis: Multi-model code review and suggestions
• GitHub Integration: Load files directly from any public repository
• Auto-Save: Your work is automatically saved to the database
• Session Recovery: Resume exactly where you left off

Getting Started

Paste Code Mode

1. Navigate to ReformCode
2. Ensure the Code Editor tab is selected
3. Paste or type your code in the editor
4. Select the correct programming language
5. Click Analyze to get AI insights

Repository Mode

1. Click Sync GitHub in the toolbar
2. Enter a repository URL or owner/repo format
3. Browse the file tree in the left sidebar
4. Click any file to load it in the editor
5. Analyze with your preferred AI model

Editor Features

Syntax Highlighting

Full syntax highlighting for 20+ languages:

Frontend: JavaScript, TypeScript, HTML, CSS, React/JSX Backend: Python, Go, Rust, Java, C#, Ruby, PHP Systems: C, C++, Swift, Kotlin Data: SQL, JSON, YAML, XML, GraphQL Scripts: Bash, PowerShell, Markdown

Smart Editing

• IntelliSense: Context-aware autocomplete
• Error Detection: Real-time syntax error highlighting
• Code Folding: Collapse functions and blocks
• Multi-Cursor: Edit multiple locations simultaneously
• Search & Replace: Regex-powered find and replace

Code Formatting

Press Shift + Alt + F or click the Format button to auto-format:

• JavaScript/TypeScript: Prettier formatting
• Python: Black-style formatting
• JSON: Prettified with proper indentation
• HTML/CSS: Organized and readable output

AI Analysis

Selecting AI Models

Choose from 5 AI models based on your needs:

What AI Analyzes

Every analysis covers:

1. Correctness & Bugs

   • Logic errors and edge cases
   • Potential runtime exceptions
   • Type safety issues

2. Best Practices

   • Code style and conventions
   • Design pattern suggestions
   • Naming improvements

3. Performance

   • Algorithm efficiency
   • Memory usage concerns
   • Bottleneck identification

4. Security

   • Injection vulnerabilities
   • Data exposure risks
   • Authentication issues

5. Refactored Code

   • Improved implementation
   • Explanation of changes

Reading Results

AI responses are formatted in clear sections:

• Strengths: What's done well
• Issues: Problems to address (with severity)
• Suggestions: Improvement ideas
• Refactored Code: Better implementation with explanations

Auto-Save & Session Recovery

How Auto-Save Works

Your work is automatically saved:

• Every 30 seconds when changes are detected
• Before navigating away from the page
• When switching tabs in ReformCode

Session Recovery

If you close the browser or navigate away:

1. Return to ReformCode
2. Your last session is automatically restored
3. Code, language, and filename are preserved

Manual Save

Click the Save button or press Cmd/Ctrl + S to save immediately.

GitHub Integration

Quick Repository Access

Popular repositories for one-click access:

• facebook/react
• vercel/next.js
• microsoft/typescript
• nodejs/node

Custom Repository

Enter any public repository:

https://github.com/owner/repo
owner/repo

File Explorer

• Folders: Click to expand/collapse
• Files: Click to load in editor
• Search: Filter files by name
• File Info: See sizes and types

Working with Repository Files

1. Load a file from the tree
2. Edit in the Monaco editor
3. Run AI analysis
4. Download modified version

Keyboard Shortcuts

Integration with Other Tools

Send to Transformer

1. Load code in the editor
2. Click Send to Transformer
3. Code transfers to Transformer tab
4. Select target language/framework

Send to Builder

1. Describe what you want to build in the editor
2. Click Send to Builder
3. AI generates a complete application

Save as Snippet

1. Select useful code
2. Click Save to Snippets
3. Add name and tags
4. Access from Snippets tab anytime

Tips for Effective Code Review

Choose the Right Model

• Quick syntax check: Use Gemini Flash (1 credit)
• Standard review: Use Gemini Pro or Claude Haiku (2-3 credits)
• Critical code: Use Claude Sonnet or Opus (4-6 credits)

Maximize AI Value

1. Provide context: Include relevant imports and types
2. Isolate concerns: Analyze focused code sections
3. Review iteratively: Fix issues, then re-analyze
4. Learn patterns: Note recurring suggestions

Best Practices

• Select accurate language for proper highlighting
• Review the full AI output, don't skip sections
• Test suggested changes before committing
• Use version control as a safety net

Troubleshooting

"Repository not found"

• Verify the URL is correct
• Ensure the repository is public
• Try owner/repo format instead of full URL

"Failed to load file"

• Files over 1MB may fail to load
• Try a different branch
• Check your internet connection

Editor not responding

• Refresh the page
• Clear browser cache
• Try a different browser

AI analysis stuck

• Check your credit balance
• Try a different model
• Refresh and retry

Credit Usage

Next Steps:

• Code Transformer - Convert between languages
• AI Builder - Generate complete apps
• Credits System - Manage your usage