Your Browser Can Edit Real Files Now

The File System Access API lets browsers open, edit, and save files directly on your disk - no server, no upload, no download. Here is how I built a full file editor with it.

For decades, the browser was sandboxed from your file system. You could pick a file to upload, but that was it - the browser got a copy, never a handle to the real thing. Any change you made had to come back as a download.

The File System Access API changes that completely.

What the API does

Three methods are all you need:

showOpenFilePicker() - opens a native file picker and returns a handle to the real file
fileHandle.getFile() - reads the current content
fileHandle.createWritable() - opens a writable stream back to the same file on disk

That writable stream is the key. You write bytes, you close it, and the file on your computer updates - no download prompt, no temp file, no copy. The browser writes directly to the original.

What I built

A clean browser-native file editor. Open any text file (.txt, .md, .js, .json, .css, .py, and more), edit it in the browser, and save it back with Ctrl+S or the Save button.

Features:

Open any text file - native OS file picker, same as any desktop app
Save in place - writes back to the original file on disk, not a download
Save As - pick a new location and filename (new files start here)
Auto-save - toggle it on, changes flush automatically after 1.5 seconds
Focus mode - hides all UI, centers your text, Esc to exit
Live stats - word count, line count, character count in real time
Unsupported browser handling - graceful fallback for browsers that don't support the API (Firefox, Safari)

The whole thing is around 200 lines of React with no external dependencies beyond Vite and Tailwind.

The permission model

The first time you call showOpenFilePicker(), the browser asks the user to pick a file. That action itself is the permission grant - no extra dialog, no scary prompt. The user chose the file, so they implicitly allowed access to it.

createWritable() may prompt on some browsers if the origin is not trusted (like localhost without HTTPS). On a deployed site over HTTPS, it is seamless.

One important detail: the permission resets between sessions. If the user closes the tab and reopens the app, they need to open the file again. The API does have queryPermission() and requestPermission() for persistent handles, but for a focused single-session editor, reopening the file is a natural action anyway.

The catch: Chrome and Edge only

The File System Access API is only supported in Chromium-based browsers. Firefox and Safari do not implement it (as of mid-2025). The app detects this with:

const supported = 'showOpenFilePicker' in window

And shows a clear fallback message pointing users to Chrome or Edge. That is the honest thing to do - no silent failures.

Why this matters

This is project 04 in the build-it-small series. Each project explores one browser API that most developers do not know exists. The theme is: browsers are more powerful than we assume.

You do not need a desktop app to edit files. You do not need Electron. You do not need a server. A 200-line React component and a modern browser can do what used to require native code.

Try it yourself.

Source code: github.com/paolinellih/build-it-small

Previous in the series: