Standalone File Explorer UI for the NodeJS filesystem API for using in the browser, i.e. for browser libraries that implement the NodeJS FS API such as zenfs and memfs.
This may be useful if you have an existing project that uses any of these libraries, you can add this to let users explore and modify the file system.
This project bundles the svelte component from https://www.npmjs.com/package/nodejs-fs-explorer-ui to make it easily reusable without needing Svelte. If you are using Svelte you should use the Svelte component directly.
Demo: https://nodejs-fs-explorer-ui-bundle.onrender.com/demo.html
npm install nodejs-fs-explorer-ui-bundleimport mountNodeJsFsExplorer from "nodejs-fs-explorer-ui-bundle";
import fs from "@zenfs/core";
mountNodeJsFsExplorer(container, fs, {
initialDir: "/home",
});If you are not using npm or a bundler you can download the standalone prebuilt files from the dist folder:
<!DOCTYPE html>
<html>
<head>
<!-- Always use the .iife.js since it is minified and optimized for this use case -->
<script src="./nodejs-fs-explorer-ui-bundle.iife.js"></script>
</head>
<body>
<div id="explorer"></div>
<script type="module">
import * as fs from "./zenfs/esm/core.browser.min.js";
const container = document.getElementById("explorer");
// This function is exposed as a global variable when using the .iife.js prebuilt file
mountNodeJsFsExplorer(container, fs, {
initialDir: "/home",
});
</script>
</body>
</html>pnpm installpnpm buildThis will create a vite server with live reloading
pnpm devTo test the build files you can start an http server and browse to the test-build.html file.
This software is distributed under the LGPL-3.0 license.