ZenFS DOM
    Preparing search index...

    ZenFS DOM

    ZenFS DOM Backends

    ZenFS backends for DOM APIs. DOM APIs are only available natively in browsers.

    Please read the ZenFS core documentation!

    • WebStorage stores files in a Storage object, like localStorage and sessionStorage.
    • IndexedDB stores files into an IndexedDB object database.
    • WebAccess uses the File System Access API.
    • XML uses an XMLDocument to store files, which can be appended to the DOM.

    For more information, see the API documentation.

    You can use the backends from @zenfs/dom just like the backends from @zenfs/core:

    import { configure, fs } from '@zenfs/core';
    import { WebStorage } from '@zenfs/dom';

    await configureSingle({ backend: WebStorage, storage: localStorage });

    if (!fs.existsSync('/test.txt')) {
    fs.writeFileSync('/test.txt', 'This will persist across reloads!');
    }

    const contents = fs.readFileSync('/test.txt', 'utf-8');
    console.log(contents);

    The XML backend can be used to create a file system which lives in the DOM:

    <!-- ... -->
    <fs />
    <!-- ... -->
    import { configure, fs } from '@zenfs/core';
    import { XML } from '@zenfs/dom';

    await configureSingle({
    backend: XML,
    root: document.querySelector('fs'), // root is optional
    });

    fs.writeFileSync('/test.txt', 'This is in the DOM!');

    If you choose to add the root element to the DOM by appending it, you will likely want to hide its contents (display:none works well).

    The root option is not required. If you choose not to pass in a root, you can always append it to the DOM later:

    import { configure, fs, mounts } from '@zenfs/core';
    import { XML } from '@zenfs/dom';

    await configureSingle({ backend: XML });

    const { root } = mounts.get('/');

    document.body.append(root);

    This may disrupt use cases that involve saving the HTML file locally and loading it later, since a new element is created when configuring. In contrast, when using an existing element and passing in a root, the existing element's contents will be preserved.