demo · v133

FileSystemObserver

Watch an OPFS directory for live mutations. Create, modify, and delete files via the buttons — every change fires a real FileSystemObserver callback. The mutations are happening in this tab; the observer reports them as if you'd edited the disk.

Behind a flag on stable Chrome 133. Enable chrome://flags/#file-system-observer if the support line below says no.

checking support…

the code

const root = await navigator.storage.getDirectory();
const obs = new FileSystemObserver((records) => {
  for (const r of records) {
    console.log(r.type, r.changedHandle?.name, r.relativePathComponents);
  }
});
await obs.observe(root, { recursive: true });
// type: "appeared" | "disappeared" | "modified" | "moved" | "errored"

see also