theFinder

theFinder is a React component, a CSS file and a single API endpoint. The interface depends on no UI library. The server side is built on the web-standard Request → Response, so the same code runs on Next.js, Bun, Node, Express, Fastify, Koa and Hono. Files live on local disk, in S3, or both. Runtime dependencies of the core: zero.

Highlights.

Virtual list

A folder of 10,000 files. No stutter.

~100 DOM nodes, however many files the folder holds.
Version history

Every save keeps the previous copy. No database.
1. proposal-2026.mdCurrent
2. Before edit2 min ago · 412 B
3. Before optimizationYesterday · 1.8 MB
4. Before uploadOct 3 · 1.9 MB
Trash

Delete never asks. Because it can be undone.

“cover.jpg” moved to Trash

Deleted items wait 30 days in the .tf-trash folder inside the volume. On local disk and on S3 alike.

S3, R2, MinIO

Cloud storage. Without the AWS SDK.

s3Driver({
  bucket: "my-bucket",
  region: "auto",
  endpoint: "https://…r2.cloudflarestorage.com",
})

SigV4 signing with Web Crypto. Runs on edge runtimes too.

Keyboard

Never touch the mouse.

Space Quick Look F2 Rename CtrlC Copy ShiftDel Delete permanently CtrlF Find in editor abc Type to jump
Accessibility

Scanned with axe-core, in light and dark.

0 WCAG 2.1 AA violations. The list view is an ARIA grid, the icon view a listbox.
Next.js

Including output: "standalone".

project/ .next/standalone/server.js uploads/ ← files live here in every mode app/api/files/route.ts

theFinder in a minute.

Lasso selection, Quick Look, cut and paste, the image editor, the virtual list and how it compares to elFinder, in one silent short.

Whatever your backend is.

The engine is one function: finder.handler(request) takes a Request and returns a Response. Bun, Hono and Next.js use it as is; Express, Fastify and Koa get thin adapters.

Uploads arrive in chunks and the server keeps no state between them. No body-size limits to hit, and it works on serverless too.

app/api/files/route.ts

import {
  createTheFinder, createNextRoutes, localDriver, uploadsDir,
} from "@thefinder/next";

const finder = createTheFinder({
  volumes: [{
    id: "uploads",
    driver: localDriver({ root: uploadsDir() }),
    url: "/uploads",
  }],
});

export const runtime = "nodejs";
export const { GET, POST } = createNextRoutes(finder);

server.ts

const driver = localDriver({ root: "./uploads" });
const finder = createTheFinder({
  volumes: [{ id: "files", driver, url: "/uploads" }],
});

Bun.serve({
  routes: {
    "/api/files": finder.handler,
    "/uploads/*": createFileServer({ driver, prefix: "/uploads" }),
  },
});

server.mjs

import { toExpress } from "@thefinder/core/node";

app.all("/api/files", toExpress(finder.handler));
app.get("/uploads/*", toExpress(
  createFileServer({ driver, prefix: "/uploads" }),
));

// Fine even if express.json() ran first:
// the adapter rebuilds the consumed body.

server.ts

import { toFastify } from "@thefinder/core/node";

fastify.register(toFastify(finder.handler), { prefix: "/api/files" });

// The plugin turns off body parsing in its own scope.

server.ts

import { toKoa } from "@thefinder/core/node";

router.all("/api/files", toKoa(finder.handler));

index.ts

// No adapter needed: Hono already uses the web-standard Request.
app.all("/api/files", (c) => finder.handler(c.req.raw));

Disk. Cloud. At the same time.

Each storage is a volume. They sit side by side in the sidebar, and you can copy and move between them.

localDriver Local disk <project>/uploads

copy · move

@thefinder/core Engine auth · versions · trash · thumbnails

multipart · presigned

s3Driver S3 · R2 · MinIO Spaces · Backblaze B2

Write your own driver. FTP, Azure Blob, Google Drive… implementing the nine methods of the StorageDriver interface is enough.
The server keeps no state. The upload session travels with the client; target, permissions and extension are checked again on every chunk.
No database needed. Trash, versions and thumbnails live in hidden .tf-* folders inside the volume.

What's inside.

No Monaco, no CodeMirror, nothing loaded from a CDN. The editors ship in the package itself.

Code editor

Highlighting for 13 language families, find and replace, go to line, smart indent, Ctrl+S to save. The old copy goes into the version history before every save.

Markdown

Editing with a side-by-side preview. Raw HTML is not rendered and links are limited to safe schemes, so opening an untrusted file is harmless.

Image editor

Crop, rotate, flip, resize; pick the format and quality. Convert selected images to WebP or AVIF in one go.

Quick Look

Space previews images, video, audio, PDF, code and Markdown. Video seeking works through Range requests.

File picker

useFilePicker returns a Promise: adding a “Choose file” button to your form takes three lines. Outside React, openFilePicker.

CKEditor

A CKEditor 5 plugin and a CKEditor 4 connector. They do CKFinder's job: a toolbar button and uploads for pasted images.

Secure by default.

A file manager means write access to your server. theFinder has taken that seriously from day one.

Path traversal: Paths containing .. are rejected, never resolved. Symlinks pointing outside the root are hidden.
CSRF: Every request that changes something must be a POST and carry the x-thefinder header.
Archives: Zip-slip and zip-bomb protection. The total extracted size is capped.
Active content: Uploaded HTML and SVG are served with a sandbox CSP; they cannot run scripts on your site's origin.
Authorization: authorize runs before every command. 401, 403 or a per-request read-only mode.
Permissions: readOnly per volume, permission per path, extension lists and a size limit.

theFinder and elFinder.

elFinder is the first name that comes to mind for web file managers, and it has been in the field for more than fifteen years. theFinder rethinks the same job with today's stack. Both are good tools; which one suits you depends on how your project is built.

Feature

theFinder React · TypeScript · 2026

elFinder jQuery · PHP · 2.1 series

Technology

Interface React 18+ component, native CSS (@layer, container queries) jQuery and jQuery UI plugin

Server TypeScript, web-standard Request → Response. Node, Bun, Deno, edge. Official connector in PHP. Community connectors for other languages.

Dependencies None in the core. Only react (peer) in the UI. jQuery and jQuery UI on the client

Next.js Ready-made routes, standalone-safe project root detection No official integration

Protocol One endpoint, JSON envelope, typed client (@thefinder/core/client) One endpoint, elFinder protocol (cmd=open…)

Storage

Local disk Yes Yes

S3-compatible Built in, no AWS SDK; multipart, presigned URLs Through an extra driver package (e.g. Flysystem)

FTP, Dropbox, Google Drive, OneDrive, Box Not built in; can be written with StorageDriver Built-in drivers

Several volumes, moving between them Yes Yes

File operations

Chunked and folder uploads Yes; the server keeps no state Yes

Zip for multi-file downloads Streamed, instant; zip64 Yes

Archive formats Zip; its own code, no server tools needed Zip, tar, gzip, bzip2, 7z, rar; through tools on the server

Trash On by default, “Undo” notification, automatic cleanup By configuring a separate trash volume

Version history Yes; preview, restore, bulk cleanup No

Storage dashboard Usage by type, largest files, cleanup No

Bulk image conversion WebP, AVIF, JPEG, PNG; resize and compress Resize, crop and rotate for a single image

Editors and interface

Code and Markdown editor Built in, no dependencies Plain text built in; editors like Ace and CodeMirror load from a CDN

Large folders Virtual list: ~100 DOM nodes for 10,000 files Renders in pieces as you scroll

Accessibility ARIA grid and listbox, 0 violations with axe-core Keyboard shortcuts

Theming Light, dark, auto; Classic and macOS looks; CSS variables jQuery UI themes and community themes

Languages English and Turkish; more through messages More than 30 languages

Ecosystem

File picker useFilePicker, openFilePicker (Promise) getFileCallback

Editor integration CKEditor 5 and 4 package Recipes for CKEditor, TinyMCE and others

Maturity New; 0.x releases More than 15 years; Laravel, Symfony, Django, WordPress plugins

License MIT BSD-3-Clause

Choose theFinder if

your app runs on React, Next.js or a JavaScript server,
your files live in S3 or R2, or you run on serverless,
you want version history, a trash and image optimization out of the box,
you want the interface to match your design system through CSS variables.

Stay with elFinder if

your server is PHP and will stay PHP,
you need to connect to Dropbox, Google Drive or FTP today,
you work with archives like tar, 7z and rar,
you need ready translations beyond English and Turkish.

elFinder details are based on the documentation of the 2.1 series. If you spot a wrong or outdated row, open an issue.

Four packages. Install what you need.

npm i @thefinder/core @thefinder/react @thefinder/next

@thefinder/core: Server engine, local and S3 drivers, Node adapters, browser client. No runtime dependencies.
@thefinder/react: The <TheFinder /> component, useFilePicker, openFilePicker and styles.css.
@thefinder/next: Next.js routes and standalone-safe project root detection.
@thefinder/ckeditor: A CKEditor 5 plugin and a CKEditor 4 connector.

See for yourself.

Open the demo full screen Get started

A Finder for the web.

Highlights.

A folder of 10,000 files. No stutter.

Every save keeps the previous copy. No database.

Delete never asks. Because it can be undone.

Cloud storage. Without the AWS SDK.

Never touch the mouse.

Scanned with axe-core, in light and dark.

Including `output: "standalone"`.

theFinder in a minute.

Whatever your backend is.

Disk. Cloud. At the same time.

What's inside.

Code editor

Markdown

Image editor

Quick Look

File picker

CKEditor

Secure by default.

theFinder and elFinder.

Technology

Storage

File operations

Editors and interface

Ecosystem

Choose theFinder if

Stay with elFinder if

Four packages. Install what you need.

See for yourself.

Highlights.

A folder of 10,000 files. No stutter.

Every save keeps the previous copy. No database.

Delete never asks. Because it can be undone.

Cloud storage. Without the AWS SDK.

Never touch the mouse.

Scanned with axe-core, in light and dark.

Including output: "standalone".

theFinder in a minute.

Whatever your backend is.

Disk. Cloud. At the same time.

What's inside.

Code editor

Markdown

Image editor

Quick Look

File picker

CKEditor

Secure by default.

theFinder and elFinder.

Technology

Storage

File operations

Editors and interface

Ecosystem

Choose theFinder if

Stay with elFinder if

Four packages. Install what you need.

See for yourself.

Including `output: "standalone"`.