Skip to main content
Polaris provides a comprehensive file explorer that makes it easy to navigate, create, edit, and organize your project files and folders.

​
File Explorer Overview

The file explorer is located on the left sidebar and displays your project’s file structure in a tree view.

​
Explorer Components

  • Project header - Shows project name and quick action buttons
  • Tree view - Hierarchical display of files and folders
  • File icons - Visual indicators for different file types
  • Folder icons - Distinct icons for directories
  • Collapse/expand controls - Chevron icons for navigation
Files and folders are automatically sorted with folders first, then files, both in alphabetical order.

​
Creating Files and Folders

​
Quick Creation from Project Header

Hover over the project name to reveal action buttons:
1

Hover over project name

Quick action buttons appear on the right side of the project header
2

Choose action

  • File+ icon - Creates a new file in the project root
  • Folder+ icon - Creates a new folder in the project root
3

Enter name

Type the file or folder name in the inline input that appears
4

Confirm

Press Enter to create, or Escape to cancel

​
Context Menu Creation

Create files and folders inside specific directories:
1

Right-click a folder

Opens the context menu with available actions
2

Select action

Choose “New File” or “New Folder” from the menu
3

Name your item

Enter the name with appropriate extension (for files)
4

Confirm creation

Press Enter to create, or Escape to cancel
Files are created with empty content by default. You can immediately start editing after creation.

​
File Navigation

​
Opening Files

Two ways to open files in the editor: Preview Mode (Single-click):
  • Click once on a file name
  • Opens in a preview tab (italicized name)
  • Clicking another file replaces the preview
  • Perfect for quick browsing
Pinned Mode (Double-click):
  • Double-click a file name
  • Opens in a permanent tab (normal name)
  • Stays open when clicking other files
  • Use for files you’re actively editing
Preview tabs are shown in italic text, while pinned tabs use regular text. You can convert a preview to pinned by double-clicking its tab.

​
Folder Navigation

  • Click folder name to expand/collapse
  • Chevron icon rotates to indicate state:
    • Right-pointing: Collapsed
    • Down-pointing: Expanded
  • Nested folders indent further right
  • Folders load contents on-demand when expanded

​
File Operations

​
Renaming Files and Folders

1

Access rename

Right-click the file or folder and select “Rename”
2

Edit name

An inline input appears with the current name selected
3

Submit changes

Press Enter to save the new name, or Escape to cancel
Renaming a file changes its name but doesn’t automatically update import statements in other files. You may need to update references manually.

​
Deleting Files and Folders

1

Right-click item

Open the context menu on the file or folder
2

Select delete

Click “Delete” from the menu options
3

Confirm deletion

The item is removed immediately
Deletion is immediate and cannot be undone. Deleting a folder removes all its contents recursively.

​
Context Menu Actions

Right-click any file or folder to access: For Files:
  • Rename
  • Delete
For Folders:
  • Rename
  • Delete
  • New File
  • New Folder

​
Project Header Actions

The project header includes several utility buttons:

New File

Create a new file in the root directory

New Folder

Create a new folder in the root directory

Collapse All

Collapse all expanded folders at once for a cleaner view
Use “Collapse All” when your file tree gets cluttered. It folds all expanded folders back to the root level.

​
File Icons

The explorer displays contextual icons for different file types:
  • JavaScript (.js, .jsx) - Yellow/gold icon
  • TypeScript (.ts, .tsx) - Blue icon
  • HTML (.html) - Orange icon
  • CSS (.css) - Blue/cyan icon
  • JSON (.json) - Green icon
  • Markdown (.md, .mdx) - Gray icon
  • Python (.py) - Blue/yellow icon
  • Folders - Dynamic folder icon based on name
  • Generic files - Default file icon for unknown types
Icons are automatically assigned based on file extensions, making it easy to identify file types at a glance.

​
Visual States

​
Active File

The currently open and focused file is highlighted:
  • Background color changes to indicate selection
  • File remains highlighted when viewing its tab
  • Only one file can be active at a time

​
Hover States

  • Files and folders highlight on hover
  • Context menu buttons appear on right-click
  • Project header buttons appear on project name hover

​
Loading States

When expanding folders for the first time:
  • Loading indicator appears while fetching contents
  • Skeleton rows show temporarily
  • Content replaces loading state when ready

​
Optimistic Updates

File operations feel instant because of optimistic updates:
  • Create - New files/folders appear immediately
  • Rename - Name changes instantly
  • Delete - Items disappear right away
The UI updates optimistically, then syncs with the server in the background.
If a network error occurs, the UI will revert to the actual server state and show an error notification.

​
Keyboard Navigation

ActionKey
Rename file/folderF2 (via context menu)
Confirm create/renameEnter
Cancel create/renameEscape
Close tabClick X or open another preview

​
File Explorer Tips

Quick Preview

Single-click files to preview without cluttering your tab bar

Pin Important Files

Double-click files you’re actively working on to keep them open

Use Folders

Organize related files in folders for better project structure

Collapse When Needed

Use the collapse all button to reset your view and reduce visual clutter

​
Limitations

  • Maximum file name length is enforced by the system
  • Special characters in file names may be restricted
  • Folder deletion requires the folder to be empty (or deletes recursively)
  • Binary files cannot be edited in the code editor

Build docs developers (and LLMs) love

Get started for freeTalk to us