Browser Hub Demo
File System Access API
A browser app can behave much more like installed software when it can work against real files instead of forced upload-download loops.
Desktop-class workflows
What this unlocks
Open, edit, and save user files directly from the browser with native file pickers. Best in Chromium-based browsers in secure contexts. Other browsers should offer a download fallback rather than direct save-back.
File System Access API
Open, edit, and save user files directly from the browser with native file pickers.
Try opening a local text file, editing it, and saving it back. Browsers without direct file system access still get a normal download fallback.
Active file: draft.txt
No file opened yet.
Use cases
Real product scenarios
These are the kinds of workflows where the API earns its complexity.
Lightweight content editors and CMS tools.
File System Access API helps when the browser needs to move beyond plain navigation and forms.
CSV cleanup and batch operations without cloud upload.
File System Access API helps when the browser needs to move beyond plain navigation and forms.
Local-first notes, scripts, or configuration editors.
File System Access API helps when the browser needs to move beyond plain navigation and forms.
Shipping notes
Progressive enhancement rules
Browser capability work is product design work. Support levels, permissions, secure context requirements, and fallback behavior matter as much as the demo itself.
Users stay in control of file permissions.
Best in Chromium-based browsers in secure contexts. Other browsers should offer a download fallback rather than direct save-back.
Always provide fallback export paths for unsupported browsers.
Best in Chromium-based browsers in secure contexts. Other browsers should offer a download fallback rather than direct save-back.
More demos
Related browser capabilities
Continue through the hub to see how other modern APIs can reshape UX, device integration, and workflow design.
Visual continuity
View Transitions API
Animate layout and state changes as one coherent transition instead of a hard redraw.
Open View Transitions APINative utilities
EyeDropper API
Sample any on-screen color with the system picker and pipe it back into the web app.
Open EyeDropper API