File Explorer

The File Explorer in Q-Remix IDE is located on the left sidebar and serves as the central panel for browsing and managing your project's files and folders. It enables you to:

• Browse and manage project files

• Create and organize folders

• Import files from multiple sources

File Storage (IndexedDB)

Q-Remix IDE uses IndexedDB for storing files locally within your browser. Unlike Google Docs or cloud-based editors, Q-Remix doesn’t store your files on a centralized server.

How It Works:

• Q-Remix leverages browser session-based storage

• Files and folders are saved locally in your browser

• No login or account creation is required to get started

Important Notes:

• This storage is not permanent. It may be lost due to:

  • Clearing browser data

  • Browser crashes or updates

  • Using incognito/private mode

Tip: Always save your work regularly using Ctrl + S.

Managing Files in the File Explorer

• View Imported Files:

  • The file explorer, located on the left side of the Q-Remix interface, displays all imported files and folders in a tree structure.

  • Files (e.g., hello.sol) appear as individual entries, while folders (e.g., OpenZeppelin contracts) are collapsible directories.

• Open and Edit Files:

  • Click on any file in the file explorer to open it in a tab for editing.

  • Multiple files can be opened simultaneously, with each file appearing as a tab at the top of the editor.

• Organize Files:

  • Drag and drop files or folders within the file explorer to reorder them.

  • Rename files by right-clicking and selecting "Rename," or delete them using the "Delete" option.

• Expand/Collapse Folders:

  • Click the arrow next to a folder to expand or collapse it, keeping your workspace uncluttered.

Workspaces

Workspaces in Q-Remix are like isolated folders for separate projects. Each workspace maintains its own file system, independent of others.

Key Points:

• Files in one workspace cannot be accessed or imported from another

• You can create, switch, or delete workspaces from the File Explorer sidebar

Creating a Workspace:

1. Click "Add Workspace"

2. A pop-up will appear asking for a unique name

3. A new, empty workspace will be created and displayed in the file tree

Workspace section

By clicking on the Add Workspace option one can create a new workspace for projects that they need. Then a pop up appears asking for the name of the workspace, the chosen name must be unique in nature

New Workspace

View all workspaces by clicking on the Selected Section. A popup will appear with the available options

Select any workspace option to switch between workspaces, each containing its own set of folders and files.

The top workspace represents the currently selected one, while the one below represents the previous workspace, and so on, with each subsequent workspace showing the previous one in the sequence.

Working with Files

There are many options which appear under the workspace session, making it easier for development of the project

File Working options

These options are:

1. Create File

2. Create Folder : Creates a folder at the desired location

3. File import : Imports file from local device

4. Folder import : Imports folder from local device

5. Import from IPFS : Imports files from local device - in later updates

6. Import github repository : Imports projects from the given link or pre determined project like openzepellin or Uniswapv4 etc.

7. Git Integration : connects github to the current workspace - in later updates

Under each workspace, several actions are available to manage project files effectively:

Action	Description
Create File	Create a .sol or other file in the selected folder or root directory
Create Folder	Create a new folder inside the selected location
Import File	Upload a file from your local machine
Import Folder	Upload a folder from your local machine
Import from IPFS	(Coming soon) Import files directly from the InterPlanetary File System
Import GitHub Repository	Import files from a public GitHub repo or a preset template (e.g., OpenZeppelin)
Git Integration	(Coming soon) Connect a GitHub repository to your workspace

Create File

This option is used to create file either in the desired folder (selected folder) or a new file outside any folder. There are two ways of doing this. The above mentioned method allows you to do both of them. Another option is after creating the folder the second icon, similar to the file icon as seen above will appear if you hover over the folder. This option allows you to create a file in that specific folder.

• To create a file inside a folder:

  • Hover over the folder to reveal a small file icon

  • Click the icon to create a file inside that folder

• Files can be renamed, deleted, or dragged to a different folder for organization.

Creating files

Other icons on the right are creating folder, rename and delete. Out of these options any file created would also have the option of delete and rename.

Both of these options can be used anytime one desires but one must always be aware of the location where the file lands. If the file created is not in the desired folder, the user can drag the file to the desired location, thereby moving it.

Import Github Repository

This is a new feature mainly for the smart contract developers to use. it comes with two different approaches. On clicking the link option (number 6 in the above picture), the following screen pops up

Import Github Repository

The first option is select a library which allows the user to select between two predetermined libraries mostly used for creating smart contracts, these libraries are openzepellin and uniswapv4.

The GitHub Import feature is tailored for smart contract developers, especially those who work with popular libraries like OpenZeppelin or Uniswap.

Steps:

1. Click the Import GitHub Repository option

2. Choose one of the following:

   • Preset Libraries: Choose between:

     • OpenZeppelin

     • Uniswap v4

   • Custom URL: Enter the public URL of a GitHub repo

     • Private repos are not supported

3. Once imported:

   • A new folder named library/ will be created

   • Inside it, the selected repo will be added as a subfolder (e.g., uniswapv4/)

Notes:

• The import process supports .sol and other relevant files

• Duplicate imports are not allowed

  • You must delete a previously imported repo before re-importing it

If another project needs to be called, the user can select Custom url option. On selecting custom URL the user would be asked to give the link to that repository. The repository must be public in nature otherwise the import would fail.

After giving the URL or selecting any option between openzepellin contracts and uniswapv4, a new folder would be created called library having a folder with the same name as the one getting imported

In this example I imported uniswapv4 using the above option. This is the result

Import Repo result

As you can see all the folders and files which contain smart contracts or any file with .sol extension gets imported. This process can be repeated as many times needed but same repo cant be imported twice until and unless the previous one is deleted.