File Handle API Demo - Online Persistent File Access

The File System Access API (formerly known as the File Handle API) is a modern web API that allows web applications to read, write, and manage files and directories on the user's local file system. It provides persistent access through FileSystemFileHandle objects, which can be stored in IndexedDB and reused across browser sessions — with the user's permission. This bridges the gap between web apps and native desktop applications.

As of 2025, the API is supported on Chromium-based browsers including Google Chrome (86+), Microsoft Edge (86+), Opera (72+), and Brave. Firefox and Safari (including iOS Safari) do not yet support this API. Mobile browser support is extremely limited — the API is designed primarily for desktop use. This demo includes a fallback mode for unsupported browsers.

When you open a file using window.showOpenFilePicker(), the browser returns a FileSystemFileHandle. This handle is serializable and can be stored in IndexedDB. When you revisit the page later, the stored handle can be retrieved and used to re-open the file — but the browser will verify permissions via handle.queryPermission() and may prompt the user to re-grant access via handle.requestPermission(). This mechanism enables truly persistent file access.

Yes. The API is designed with strong security principles: it only works in secure contexts (HTTPS or localhost), requires explicit user gestures (like clicks) to open file pickers, and files can only be accessed within the scope the user authorized. The API uses origin-based isolation, meaning a handle from one domain cannot be used by another. Permissions are transparent and revocable by the user at any time via browser settings.

This demo is optimized for text-based files: .txt, .json, .csv, .md, .html, .css, .js, .xml, .yaml, .log, and similar formats. Binary files (images, PDFs, executables) can be opened but will appear as garbled text. The editor uses UTF-8 encoding by default, which covers virtually all text file use cases. Large files (>10MB) may cause performance issues in the browser editor.

Absolutely! This demo supports common keyboard shortcuts: Ctrl+O to open a file, Ctrl+S to save, Ctrl+Shift+S to save as a new file, and Ctrl+N to start a new blank document. On macOS, use Cmd instead of Ctrl. These shortcuts make the editing experience feel native and efficient.

The Save button writes directly to the original file using the stored FileSystemFileHandle — no dialog needed. The Save As button triggers window.showSaveFilePicker(), which does open a system save dialog where you can choose a new location and filename. This mimics the behavior of native desktop applications.

Nothing is uploaded. All file operations happen entirely on your local device. The file content stays in your browser's memory while editing, and saving writes directly to your local disk. File handles stored in IndexedDB also remain local to your browser. No data is ever sent to any server. You can verify this by opening your browser's developer tools Network tab — you'll see zero outgoing requests during file operations.