SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 

File Manager for Svelte

Open-source and easy-to-navigate file manager component for your Svelte-based apps. Browse and manage your files in a sleek and effective way.

Get Started
View Demos

Licensed under MIT

Also available for:

Why Use SVAR File Manager for Svelte?

##

Written in Svelte

This File Manager (or File Explorer) is written in Svelte and comes with full TypeScript support. Easily customize it to your needs and connect to any server-side backend - display files from your local file system, database or cloud storage.

##

All essential file operations

With SVAR File Manager, you can perform all necessary file operations: download, upload, create, delete, copy, cut, paste, rename files. You can also preview files, as well as display file size, date of creation and other meta info up to your choice.

##

Easy navigation

To simplify navigation through a file system, SVAR File Manager has a tree view on the left that displays folders in a hierarchical manner. Additionally, you can use the breadcrumbs on the top to easily see the current location within your file system.

##

List and tiles views

For user convenience, our Svelte File Manager offers two layouts to display the content of a folder: tabular List View with detailed file info as well as Tiles View with icons or thumbnails.

##

Split view

Our file manager component offers a convenient split view feature, facilitating effortless copying, moving, and organization of files between two distinct locations of your file system.

##

Searching and sorting features

With built-in searching functionality, you can quickly find a needed file or folder by simply typing its name in a search box. You can also sort the content of the folder by clicking the column header in a list view.

Star on GitHub

Svelte File Manager Live Demo

Open Fullscreen Demo

Additional Features of Svelte File Manager

Dynamic loading

To minimize initial loading time, you can show only the top-level folders first. When the user opens a folder, its content will be loaded dynamically by request.

Keyboard shortcuts

SVAR File Manager allows you to use keyboard shortcuts for all supported file operations (create, delete, download, copy, cut paste, rename), which makes file management even more efficient.

Customizable appearance

Our Svelte File Manager comes with 2 modern light and dark themes. You can also easily customize the look and behavior of the file manager: change colors, icons, menu items, etc.

Storage info

Storage space information is shown to monitor available free space. In scenarios where multiple users access the file system, a 'refresh' button is available to update the folder's contents in real-time.

Professional support

Need custom features or integration help? Our experienced team provides priority support, custom development, and consulting services.

Contact Us

Frequently Asked Questions

SVAR Svelte File Manager is a native Svelte component that brings a complete file browser experience to Svelte and SvelteKit applications. Built without heavy dependencies, it delivers a responsive file explorer interface with tree navigation, split view, file preview, and storage tracking — all optimized for Svelte's reactivity model.
Yes. SVAR Svelte File Manager is open-source and distributed under the MIT license — free for personal and commercial projects. See it on GitHub →.
Yes. The Svelte File Manager is fully backend-agnostic. Connect it to a local file system, cloud storage (S3, Google Drive, etc.), a REST API, or any custom server-side solution with minimal configuration.
The component covers all standard file management operations: create, delete, copy, cut, paste, rename, upload, and download. Users can also preview files and view metadata such as size, type, and modification date.
Not currently. All file operations are performed via the context menu or toolbar. Keyboard shortcuts are available for all major actions, keeping workflows fast without a mouse.
Yes. The component uses on-demand loading — only top-level folders are fetched initially, with subfolder contents loaded as the user navigates. This keeps the file browser fast and lightweight even across deep or large directory structures.
Here are the steps for the quick start:
  • Install the package: npm install @svar-ui/svelte-filemanager
  • Import the Filemanager component and styles into your Svelte app
  • Pass your file structure via the data prop
  • Wrap the component in a theme — Willow (light) or WillowDark — to apply built-in light or dark themes.
The component is fully typed, making it easy to integrate safely into TypeScript-based Svelte or SvelteKit projects. You can further customize colors, icons, and other visual elements using CSS variables to match your app's design. See the Getting Started guide for a full setup walkthrough.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github