Code Editor Issues

Having trouble with the code editor? This guide helps you resolve common file management, editing, and sandbox issues when working with landing page code.

Troubleshooting Code Editor Issues

File Tree Not Loading

The file explorer sidebar is empty or stuck loading when you open the code editor.

This typically happens when the sandbox is still initializing, network connectivity is interrupted, or your session has expired.

Solution:

1. Wait for the sandbox status indicator to show connected (green icon)
2. The sandbox can take 10-30 seconds to initialize on first load
3. Check the loading spinner in the file tree panel
4. Refresh the page with Ctrl+R if the file tree doesn't load after 1 minute
5. Verify your internet connection is stable
6. Clear browser cache with Ctrl+Shift+R if the problem persists
7. Try logging out and logging back in to renew your session

Changes Not Saving

Edits you make in the code editor aren't being saved or appear to revert.

This occurs when you're editing a read-only file, auto-save has failed, or there are network connectivity issues.

Solution:

1. Look for the Saving... indicator in the editor
2. Check that the file isn't marked as read-only (look for a lock icon)
3. Manually save with Ctrl+S (Windows) or Cmd+S (Mac)
4. Wait for the save indicator to disappear before closing the editor
5. Verify your internet connection is stable
6. If auto-save fails repeatedly, copy your code and refresh the page
7. Paste your code back after the page reloads and save manually

Cannot Edit File (Read-Only)

You're unable to edit a specific file, and it shows a lock icon or read-only indicator.

This happens with protected system files that maintain template functionality and prevent breaking changes.

Solution:

1. Protected files include:
   • main.tsx - Template entry point
   • head.tsx - Document head configuration
   • form-api.ts - Form submission handler
2. These files are intentionally read-only to maintain template stability
3. To customize functionality, create new files in the same directory
4. For styling changes, edit component files or create new CSS files
5. Use the AI Editor or Design Mode for visual changes
6. Contact support if you need advanced customization beyond standard files

Editor Not Responding

The code editor freezes, becomes unresponsive, or doesn't register your keystrokes.

This typically occurs when your session has expired, the sandbox has crashed, or browser issues interfere with the editor.

Solution:

1. Wait 10-20 seconds to see if the editor recovers automatically
2. Check the sandbox status indicator for connection issues
3. Try clicking outside the editor, then click back into it
4. Save your current work with Ctrl+S before taking further action
5. Refresh the page to restart the sandbox environment
6. Try a different browser (Chrome, Firefox, Edge) if the issue persists
7. Disable browser extensions that might interfere with code editors
8. Clear your browser cache and cookies if problems continue

File Operations Failing

Creating, renaming, or deleting files produces errors or doesn't complete.

This happens when file names are invalid, files don't exist at the expected path, or concurrent operations conflict.

Solution:

1. Use valid file names (letters, numbers, dots, dashes, underscores only)
2. Avoid special characters like / \ : * ? " < > | in file names
3. Ensure file extensions match content type (.tsx, .ts, .css, .json)
4. Wait for any pending save operations to complete before creating/deleting files
5. Refresh the file tree with Refresh
6. Check that files you're trying to operate on aren't open in other tabs
7. Verify you're not trying to create duplicate file names in the same folder
8. For deletion, ensure files aren't being referenced by other files

Drag and Drop Not Working

Moving files or folders via drag and drop doesn't work or produces errors.

This occurs when trying to drop files onto other files (instead of folders), dropping items into themselves, or moving read-only items.

Solution:

1. Only drop files and folders onto folder icons (not other files)
2. You cannot drop a folder into itself or its own subfolders
3. Read-only files cannot be moved to different locations
4. Wait for any pending save operations before attempting drag and drop
5. Use right-click context menu as an alternative to drag and drop
6. Try the More menu for move/rename operations
7. Refresh the file tree if the structure becomes inconsistent

Search Not Finding Files

The file search feature doesn't return expected results or appears broken.

This happens because search only matches file names and folder paths, not file content.

Solution:

1. Search matches file names and folder paths only (not file contents)
2. Use partial file names: "comp" will find "component.tsx"
3. Search is case-insensitive for convenience
4. Clear the search input and try different keywords
5. Use the file tree navigation if you know the general location
6. For content search, open files individually and use Ctrl+F
7. Consider using the AI Editor to ask about specific code locations

Best Practices for Code Editor Usage

• Save frequently with Ctrl+S to ensure changes persist
• Organize files in logical folders for easier navigation
• Use meaningful file names that describe their purpose
• Respect read-only files to maintain template stability
• Maintain stable internet for auto-save functionality
• Refresh the file tree after bulk operations

FAQ

Related Resources

• Code Editor Overview
• File Management
• Page Builder Issues
• AI Editor Guide