Editing files

The code editor allows you to directly edit your website's source files. This guide covers how to make changes effectively and safely.

Opening a File for Editing

1. Navigate to the file in the File Explorer
2. Click on the file name
3. The file opens in the editor panel
4. You're ready to edit!

The Editing Interface

Editor Features

• Syntax highlighting - Colors for different code elements
• Line numbers - Reference specific lines
• Cursor position - Shows current line and column
• Scroll bars - Navigate long files

Multiple Tabs

Open multiple files and switch between them using tabs.

Making Changes

Basic Editing

1. Click where you want to edit
2. Type your changes
3. The file is now modified (indicated by a dot on the tab)

Common Actions

| Action | Windows | Mac | | ---------- | -------- | --------------- | | Save | Ctrl + S | Cmd + S | | Undo | Ctrl + Z | Cmd + Z | | Redo | Ctrl + Y | Cmd + Shift + Z | | Find | Ctrl + F | Cmd + F | | Replace | Ctrl + H | Cmd + H | | Select All | Ctrl + A | Cmd + A | | Copy | Ctrl + C | Cmd + C | | Paste | Ctrl + V | Cmd + V | | Cut | Ctrl + X | Cmd + X |

Safe Editing Practices

Before You Edit

1. Know what you're changing - Understand the purpose of the code
2. Make one change at a time - Easier to track what worked
3. Save before major changes - Version history will help if needed

While Editing

1. Don't delete code you don't understand
2. Keep the structure intact - Match opening/closing tags
3. Watch for error indicators - Red underlines mean problems

After Editing

1. Save your changes
2. Check the preview - See if your changes worked
3. Test functionality - Make sure nothing broke

What to Edit (And How)

Changing Text Content

Find text in quotes and change it:

// Before
<h1>Welcome to Our Site</h1>

// After
<h1>Welcome to My Amazing Website</h1>

Changing Colors

Find color values and replace them:

/* Before */
background-color: #3498db;

/* After */
background-color: #e74c3c;

Changing Numbers/Values

Adjust numeric values:

/* Before */
padding: 20px;

/* After */
padding: 40px;

Common File Types

JSX/JavaScript Files (.jsx, .js)

Components and logic:

function Button({ text }) {
  return <button className="btn-primary">{text}</button>;
}

CSS Files (.css)

Styling:

.btn-primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

JSON Files (.json)

Configuration and data:

{
  "name": "My Website",
  "version": "1.0.0"
}

Handling Errors

Syntax Errors

If you see red underlines:

1. Check for missing brackets, quotes, or semicolons
2. Make sure tags are properly closed
3. Verify spelling of keywords

Something Broke?

1. Undo - Press Ctrl/Cmd + Z multiple times
2. Don't save - Close the file without saving
3. Version History - Restore a previous version
4. Ask AI - Describe what went wrong

Tips for Non-Developers

Safe Places to Edit

• Text inside quotes - Usually safe to change
• Numbers - Adjust values like sizes
• Color codes - Swap colors (keep # for hex)

Things to Avoid

• Deleting lines you don't understand
• Changing things in curly braces {}
• Modifying import statements
• Editing anything with function or const

When in Doubt

Use the AI chat instead:

"Change the button color from blue to green"

This is safer than editing code directly.

Saving Changes

Manual Save

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

Unsaved Changes Indicator

• A dot on the file tab means unsaved changes
• The save button may highlight

Auto-Save

Some changes may auto-save. Check your editor settings.

After Saving

1. Preview updates - See your changes in the preview
2. Test thoroughly - Click around to make sure everything works
3. Publish - When ready, publish to make changes live