Skip to main content

BYOW Editor Guide

This guide explains how to use the BYOW editor to manage your website files.

You do not need technical knowledge to follow this page. Use the exact button names shown in the editor and follow the steps in order.

important

The editor is your working area.

  • Save updates the file inside the editor.
  • Your live website is not updated until you continue to the publish step and publish the site.

What You Can Do In The Editor​

In the editor, you can:

  • upload your full website folder
  • upload a ZIP file
  • add more files later
  • add a full folder later
  • drag and drop files or folders into the site
  • create a new empty file
  • create a new empty folder
  • edit text files such as HTML, CSS, JavaScript, JSON, and TXT
  • preview HTML pages
  • rename files and folders
  • delete files and folders

This page focuses only on the editor.

What The Screen Means​

When the editor is open, you will mainly use these areas:

1. File Manager​

This is the section with buttons like:

  • Add Files
  • Add Folder
  • Clear All
  • Preview (only appears for supported HTML pages)

2. Explorer​

This is the left panel that shows your website folders and files.

You can:

  • click a folder to select it
  • click a file to open it
  • use the small icons next to items to create, rename, or delete

3. Editor Panel​

This is the large panel on the right where you edit the selected file.

Before You Start​

Have your website files ready on your computer.

Typical website files include:

  • index.html
  • .css files
  • .js files
  • images such as .png, .jpg, .svg
  • fonts and other assets

First-Time Upload: Add Your Website​

If this is your first time opening the editor for a site, use one of these two methods.

Option A: Upload Your Full Website Folder​

Use this if your website already exists in a folder on your computer.

  1. Open the BYOW editor.
  2. In the upload section, click Choose Folder.
  3. Select your website folder from your computer.
  4. Wait for the files to load into the editor.
  5. Check the Explorer on the left to confirm your files appear.

Option B: Upload A ZIP File​

Use this if your website is saved as a ZIP file.

  1. Open the BYOW editor.
  2. Click Choose ZIP File.
  3. Select your ZIP file.
  4. Wait for the editor to extract the files.
  5. Confirm the files appear in the Explorer.

How To Open And Edit A File​

  1. In the Explorer, click the file you want to change.
  2. The file will open in the editor panel.
  3. Click inside the editor and make your changes.
  4. Click Save when finished.

You can also use:

  • Ctrl + S on Windows
  • Cmd + S on Mac
tip

If you click a folder, it opens and closes the folder and also selects it as the current location for imports.

How To Add More Files Later​

Use this when your site already exists in the editor and you want to add new files from your computer.

Add Single Files Or Multiple Files​

  1. In the Explorer, click the folder where you want the new files to go.
  2. Look at the small help line under EXPLORER.
  3. Confirm it says: Add Files and Add Folder import into: followed by the folder you want.
  4. Click Add Files.
  5. Select one or more files from your computer.
  6. Wait for them to appear in the Explorer.

How To Add A Full Folder Later​

Use this when you want to import an entire folder from your computer into a folder that already exists in your site.

  1. In the Explorer, click the folder where you want the imported folder to go.
  2. Check the line under EXPLORER to make sure the import target is correct.
  3. Click Add Folder.
  4. Select the folder from your computer.
  5. Wait for the folder and its contents to appear in the Explorer.

Example​

If you click a folder named images and then use Add Folder to choose a folder named products from your computer:

  • the products folder will be added inside images
  • the files inside products will come with it

How To Drag And Drop Files Or Folders​

You can also drag files or folders directly from your computer into the editor.

Drop Into A Specific Folder​

  1. Find the destination folder in the Explorer.
  2. Drag a file or folder from your computer.
  3. Drop it directly on top of the destination folder.
  4. Wait for the content to appear.

Drop Using The General File Manager Area​

  1. Click the folder you want to use as the target.
  2. Confirm the line under EXPLORER shows the correct target folder.
  3. Drag files or folders from your computer into the file manager area.
  4. Drop them there.

Important: Add Folder Is Not The Same As Create New Folder​

These two actions do different things.

Add Folder​

Use Add Folder when you already have a real folder on your computer and want to import it into the editor.

New Folder Icon In The Explorer​

Use the small folder-plus icon next to a folder when you want to create a new empty folder inside the editor.

This does not import files from your computer.

How To Create A New Empty File​

  1. In the Explorer, find the folder where the new file should go.
  2. Click the small plus icon next to that folder.
  3. A box will appear.
  4. Type the file name, such as about.html or styles.css.
  5. Click Create.
  6. Open the new file and add content.
  7. Click Save.

How To Create A New Empty Folder​

  1. In the Explorer, find the folder where the new folder should go.
  2. Click the small folder-plus icon next to that folder.
  3. Type the new folder name.
  4. Click Create.

The folder will be created inside the selected folder.

How To Rename A File Or Folder​

  1. In the Explorer, hover over the file or folder you want to rename.
  2. Click the pencil icon.
  3. Type the new name.
  4. Press Enter, or click outside the field to finish.

How To Delete A File​

  1. In the Explorer, hover over the file.
  2. Click the trash icon.
  3. A confirmation message will appear.
  4. Click OK to delete it.

How To Delete A Folder​

  1. In the Explorer, hover over the folder.
  2. Click the trash icon.
  3. Confirm the deletion.
caution

Deleting a folder removes the folder and everything inside it.

How To Preview A Page​

If you select an HTML file, you may see a Preview button.

  1. Click the HTML file you want to preview.
  2. Click Preview.
  3. Review the page.
  4. Close the preview when finished.

What Happens With Images And Non-Text Files​

Some files are not edited like text.

Images​

Image files usually show as a preview instead of editable code.

Other Binary Files​

Some files such as archives, fonts, or other non-text assets may not open for direct editing in the editor. That is normal. You can still upload, rename, and delete them.

How To Know Where New Files Will Go​

Before using Add Files or Add Folder, always check the line under EXPLORER.

It tells you the current import target.

If the target is not the folder you want:

  1. click the correct folder in the Explorer
  2. check the target line again
  3. only then click Add Files or Add Folder

A Safe Workflow For Non-Technical Users​

Follow this routine every time:

  1. Open the editor.
  2. In the Explorer, click the folder you want to work in.
  3. Check the import target line under EXPLORER.
  4. Add files, add a folder, or drag and drop.
  5. Open the file you want to change.
  6. Edit the file.
  7. Click Save.
  8. Preview if needed.
  9. Continue to publish when you are ready to make the changes live.

Common Mistakes To Avoid​

Mistake 1: Using Add Folder Without Checking The Target​

Always click the destination folder first, then check the import target line.

Mistake 2: Creating An Empty Folder When You Meant To Import One​

Remember:

  • Add Folder imports a folder from your computer
  • the folder-plus icon creates a new empty folder inside the editor

Mistake 3: Forgetting To Save​

After editing a file, click Save.

Mistake 4: Thinking Save Makes The Site Live​

Save only stores the change inside the editor. You still need to publish the site later.

Quick Reference​

To Import A Full Site For The First Time​

  • use Choose Folder or Choose ZIP File

To Add One Or More Files To An Existing Folder​

  • click the destination folder
  • confirm the import target line
  • click Add Files

To Add A Full Folder To An Existing Folder​

  • click the destination folder
  • confirm the import target line
  • click Add Folder

To Drag A Folder From Your Computer Into The Site​

  • drag it onto the destination folder in the Explorer

To Create A New Empty Folder In The Site​

  • use the folder-plus icon next to a folder

To Rename​

  • click the pencil icon

To Delete​

  • click the trash icon

Final Reminder​

If you are unsure where something will be added, stop and check the import target line under EXPLORER before uploading.

That one check prevents most mistakes.