The sidebar of the Project Editor is your Project’s root directory. It contains all the directories (folders) and files for your Project. Here’s how to create and interact with the directories and files within your project.

Manually Creating Directories

Click the New Directory button to add a new folder inside your current directory. The project root is the default if you don’t have another directory selected. Enter your new directory’s name in the yellow text field to give it a name.

Uploading Whole Directories

If you’re on Chrome or Microsoft Edge, you can drag and drop an entire directory from your computer into your Project.

Creating and Uploading Files

To start a new file from scratch, click the New File button. Give the file a name and file extension in the yellow text field.

To create a file inside a specific directory, click the directory first, then click the “New File” button.

Drag and drop individual files into the Project Root, or into directories within the project. File upload is supported in all browsers.

Note that to upload files other than text files (like images), you’ll need to be a PRO member.

Moving Directories and Files

You can drag and drop your files and directories to move them around within your project.

If you try to drop a file or directory into a directory where a file or folder of the same name already exists, we’ll let you know with an error message.

Directory Context Menu

• New File – creates a new file inside the directory
• New Folder – creates a new folder inside the directory
• Rename Folder
• Delete Folder – deleting a folder is permanent! This removes the entire folder and its contents from your project. We’ll ask you to confirm deletion before you can delete a folder. But once it’s gone, it’s gone.

File Context Menu

• Rename File
• Duplicate File
• Copy Relative Path – copies the relative path to the file to your clipboard
• Copy Relative Minified Path (optional) – copies the relative path to the minified version of the file to your clipboard
• Copy URL – copies the direct URL to the file to your clipboard.
• Delete File – deleting a file is permanent! We’ll ask you to confirm deletion before you can delete a file.

Output Files

When you use a preprocessor, the editor creates a processed output file of the processed code. These files have .processed in their filename. These output files are shown below the original file. For example, a style.scss file will show its style.processed.css file below it.

You can open the processed file and view its contents. But, you can’t edit the .processed file. To make changes to your code, edit the original file.