File explorer

The File Explorer in Promake's code editor lets you navigate through all the files that make up your website. Understanding this structure helps you find and edit the right files.

Accessing the File Explorer

Open the Code Editor view
The File Explorer is on the left side
It shows your project's folder structure

Understanding File Structure

A typical Promake project includes:

project/
├── src/
│   ├── components/    # Reusable components
│   ├── pages/         # Website pages
│   ├── styles/        # CSS and styling
│   └── assets/        # Images, fonts
├── public/            # Static files
├── package.json       # Project dependencies
└── index.html         # Entry point

Folder Types

src/ (Source)

The main folder containing your website code:

components/

Reusable parts of your website:

Header
Footer
Buttons
Cards
Navigation

pages/

Individual pages of your website:

Home page
About page
Contact page

styles/

CSS and styling files:

Global styles
Component styles
Theme colors

assets/

Media files:

Images
Icons
Fonts

public/

Static files that don't need processing:

favicon.ico
robots.txt
Static images

Navigating Files

Expanding Folders

Click the arrow or folder icon to expand/collapse folders.

Opening Files

Click on any file name to open it in the editor.

File Icons

Different file types have different icons:

| Icon | File Type | | ---- | --------------- | | 📄 | JavaScript/JSX | | 🎨 | CSS/Style files | | 📋 | JSON files | | 🖼️ | Image files | | 📝 | Markdown files |

Finding Files

Start from the root
Expand relevant folders
Click the file

By Search

Press Ctrl/Cmd + P (if available)
Type the file name
Select from results

By Content

Use Ctrl/Cmd + Shift + F for global search
Search for text content
Click results to open files

Common Files to Edit

For Content Changes

| What to Change | Where to Look | | -------------- | -------------------------- | | Page text | src/pages/ | | Component text | src/components/ | | Metadata | index.html or page files |

For Style Changes

| What to Change | Where to Look | | -------------- | -------------------------- | | Colors | src/styles/ or CSS files | | Fonts | Global CSS files | | Spacing | Component styles |

For Structure

| What to Change | Where to Look | | -------------- | -------------------- | | Layout | Component files | | Navigation | Header/Nav component | | Footer | Footer component |

File Operations

Viewing Files

Click any file to view its contents in the editor.

Editing Files

Open the file
Make changes in the editor
Save with Ctrl/Cmd + S

Downloading Files

Single file: Right-click → Download (or use download button)
All files: Use the ZIP download option

Tips

Start at src/

Most of what you want to edit is in the src/ folder.

Use File Names as Clues

File names usually describe their purpose:

Header.jsx - The header component
HomePage.jsx - The home page
styles.css - Styling

Check Component Names

If you know what component you're looking for (from the Edit Tool), search for that name.

Don't Edit nodemodules

The nodemodules/ folder contains dependencies. Never edit files here.

Project Configuration Files

package.json

Lists project dependencies and scripts. Generally don't edit unless you know what you're doing.

Configuration Files

Various config files control build settings. Edit only if necessary.