Explore showOpenFilePicker, FileSystemWritableFileStream, origin private file systems (OPFS), and building desktop-class web workflows.
Direct local disk read and write file handles with File System Access API
For decades, web applications interacted with files through a cumbersome and disconnected dance: you uploaded a file via `<input type="file">`, edited it in memory, and downloaded a separate copy (e.g. `document(1).pdf`) to your default Downloads folder.
The **File System Access API** bridges the final gap between web apps and native desktop software, allowing web applications to read and write directly to files and directories selected by the user.
Traditional file inputs provide read-only snapshots of files at the moment of selection. A web app could never write changes back to the original file path or observe directory changes on disk.
The File System Access API exposes modern Promise-based picker dialogs that return persistent file handles:
async function openFile(): Promise<string> {
const [handle] = await window.showOpenFilePicker({
types: [{
description: 'JSON Documents',
accept: { 'application/json': ['.json'] }
}],
multiple: false
});
const file = await handle.getFile();
return await file.text();
}Once granted write permission by the user, an application can stream updates directly to the file on disk using `handle.createWritable()`. This allows users to press `Cmd+S` inside a web IDE or image editor and save changes directly to their working project directory.
The Origin Private File System (OPFS) provides a highly optimized, private file system accessible only to your web application origin. With `createSyncAccessHandle()`, Web Workers achieve microsecond-latency synchronous file read/write operations — enabling full SQLite databases to run at native speeds inside the browser.
Security is strictly enforced: an application can never silently scan or access files on disk. Every directory or file handle requires explicit user selection in a native OS picker prompt, and access to critical operating system directories (like `/Windows/System32` or `/usr/bin`) is permanently blocked.
Web applications now offer the productivity and file management capabilities of native desktop software, all while running inside secure browser sandboxes.
Try these free in-browser utilities mentioned in this guide
Scale image dimensions by exact pixel measurements or percentage while keeping aspect ratio locked.
Merge multiple PDF documents into a single organized file with easy drag-and-drop page ordering.
Beautify, validate, minify, and debug JSON data with real-time error syntax diagnostics.
Explore Wasm binary instruction formats, linear memory buffers, SIMD vectorization, GC integration, and how Wasm powers in-browser audio, video, and PDF engines.
Compare synchronous 5MB key-value stores with asynchronous structured IndexedDB, origin quotas, serialization overhead, and client-side data safety.
An architectural deep dive into why client-side execution eliminates the server-side attack surface and guarantees complete data sovereignty.