Playground | IndexedDB Virtual File System

Folder: /

0 items

Select a file to inspect its immutable versions

No file selected.

VFS EventTarget Mutation Stream

Quick Code Samples (Run directly in DevTools console or your app)

// 1. Create session-bound file system
const fs = await createFS({ sessionId: "workspace-demo" });
const file = await fs.createFile("/notes.txt", "Initial content");

// 2. Update file (generates new immutable SHA-256 version)
await fs.updateFile(file.id, "Updated content with automatic hashing");

// 3. Undo previous mutation
await fs.undo();

// 4. Time travel: inspect versions and restore
const versions = await fs.listFileVersions(file.id);
await fs.restoreVersion(file.id, versions[1].hash);

npm install idb-vfs

Use local dev server (port 3030: http://localhost:3030/index.mjs)

<script type="module">
  import { createFS } from "https://esm.sh/[email protected]";
  const fs = await createFS({ sessionId: "demo" });
  await fs.createFile("/hello.txt", "World");
</script>

import { useEffect, useState } from "react";
import { createFS, type VersionedFileSystem } from "idb-vfs";

export function useFileSystem(sessionId: string) {
  const [fs, setFS] = useState<VersionedFileSystem | null>(null);

  useEffect(() => {
    createFS({ sessionId }).then(setFS);
  }, [sessionId]);

  return fs;
}

"use client";
import { useEffect } from "react";

export default function VfsComponent() {
  useEffect(() => {
    import("idb-vfs").then(async ({ createFS }) => {
      const fs = await createFS({ sessionId: "nextjs-demo" });
      console.log("Ready:", fs.sessionId);
    });
  }, []);

  return <div>Browser Virtual File System</div>;
}