Code editor overview

For users who want more control, Promake includes a built-in code editor. View and edit the actual source code of your website, just like a professional developer.

What is the Code Editor?

The Code Editor gives you direct access to your website's files:

• HTML - Structure and content
• CSS - Styles and appearance
• JavaScript - Functionality and interactions
• React/JSX - Component code
• Configuration files - Project settings

Who is it For?

👤 Beginners

Even if you don't know code, the editor lets you:

• See how your website is built
• Make small text changes directly
• Download your code for backup

👨‍💻 Intermediate Users

With some coding knowledge:

• Make quick fixes without asking AI
• Fine-tune specific values
• Learn by examining the code

🧑‍💻 Advanced Users

Experienced developers can:

• Full control over all code
• Implement custom solutions
• Integrate with development workflows

Accessing the Code Editor

From the Preview Panel

1. Open your project
2. Look at the preview toolbar
3. Click the Code icon
4. The editor opens in place of the preview

Switching Views

Toggle between:

• Preview - See your website
• Code - Edit your files

Editor Interface

File Explorer (Left Panel)

• Folder structure of your project
• Click files to open them
• Organized by type (components, styles, etc.)

Code Area (Main Panel)

• Syntax highlighting
• Line numbers
• Code editing space

Toolbar (Top)

• Save button
• Download options
• File information

Basic Usage

Opening a File

1. Navigate the file explorer
2. Click on the file you want to view
3. File contents appear in the editor

Editing Code

1. Click in the code area
2. Make your changes
3. Click Save or press Ctrl/Cmd + S
4. Changes apply to your project

Saving Changes

Changes are saved when you:

• Click the Save button
• Press Ctrl/Cmd + S
• The preview updates to reflect your changes

What Can You Edit?

Safe to Edit ✅

• Text content in components
• CSS colors and values
• Configuration values
• Simple HTML changes

Edit with Caution ⚠️

• Component structure
• JavaScript logic
• Import statements
• Complex nested code

Avoid Unless Expert ❌

• Build configurations
• Package dependencies
• Core framework files

Code Editor Features

Syntax Highlighting

Different code elements are colored for easy reading:

• Keywords in blue
• Strings in green
• Comments in gray
• And more

Line Numbers

Every line is numbered for easy reference.

Auto-Complete

Start typing and get suggestions.

Keyboard Shortcuts

| Shortcut | Action | | -------------------- | ------ | | Ctrl/Cmd + S | Save | | Ctrl/Cmd + F | Find | | Ctrl/Cmd + Z | Undo | | Ctrl/Cmd + Shift + Z | Redo |

Common Tasks

Finding Text

1. Press Ctrl/Cmd + F
2. Type what you're looking for
3. Navigate through matches

Changing Text

1. Find the file containing the text
2. Locate the text in the code
3. Edit directly
4. Save

Changing Colors

1. Find the CSS or style file
2. Locate color values (e.g., #FF5733)
3. Replace with your desired color
4. Save

Tips for Beginners

Start Small

Make one small change at a time and save to see the effect.

Use Find

Use Ctrl/Cmd + F to search for specific text instead of browsing files.

Don't Panic

If something breaks:

1. Use Undo (Ctrl/Cmd + Z)
2. Or restore from Version History
3. Or ask the AI to fix it

Learn by Exploring

Looking at code is educational even if you don't edit it.

When to Use Chat vs. Code Editor

Use Chat For:

• Adding new features
• Major changes
• Things you don't know how to code
• Complex modifications

Use Code Editor For:

• Quick text fixes
• Color adjustments
• Learning how things work
• Downloading code