window.showDirectoryPicker opens up a whole new world
摘要
文章说明 Chrome 新增的 window.showDirectoryPicker() API，允许用户授权网站访问本地目录，从而读取和写入文件夹内所有内容。作者举例包括本地优先的笔记应用（直接使用 Markdown 文件夹）、类似 Lightroom 的照片管理网页应用（可在浏览器中创建文件夹并移动本地照片），以及基于该能力构建的原型 UI。作者还用 Claude 生成了一个仿 Apple Aperture 风格的界面和一个节点式合成工具，用于在源图片上绘制多边形并进行合成，强调整个过程无需手写代码。文章进一步讨论该能力可能推动浏览器内运行更复杂的照片 / 视频编辑应用，并结合 WebGPU 等技术实现真正以本地文件系统为中心的 Web 应用形态。
荐读理由
Chrome window.showDirectoryPicker 让你直接授权本地文件夹给网页，无需任何后端就能处理 Markdown/图片等文件，这套浏览器+本地存储的本地优先架构，能直接复制到 AI 工程项目里
原文
window.showDirectoryPicker opens up a whole new world
Chrome introduced a new API, window.showDirectoryPicker() that allows the user to grant access to a directory on their computer and allow a website to read/write everything inside.
Examples that have been thrown around are a local-first notes app, where you can grant it access to a folder full of Markdown notes, and you own the data rather than it being squirrelled away in some cloud service.
The other day I was getting nostalgic about Apple’s Aperture UI and wondered whether Claude could create a similarly-themed UI. I asked it to also use window.showDirectoryPicker.
Here’s the result:
It reminds me of using Lightroom to view local files, but it’s a webpage! You can also create folders within the app and move photos into them, and it all happens on your filesystem.
It doesn’t stop there though. Imagine whole photo & video editing apps using this: powerful UIs in your browser, but working with source files on your filesystem. People are already building WebGPU video editors in the browser—I really hope they also take advantage of new local-first storage opportunities like this.
To take this prototype further, I asked Claude to create a simple compositing app inspired by Apple’s Shake. Sure enough, here’s a little node-based compositing app where you can draw a polygon and get it composited on top of your source image.
All of this without a single line of hand-written code.
It’s an amazing world we’re living in!
这条对你有帮助吗？