Recommended Free Tools
DevToolbox discovers its browser utilities from files under src/tools/<id>/, rather than listing each one in a central router or sidebar switch. Each tool exports a ToolDefinition; a Vite import.meta.glob call gathers matching index.ts modules into a registry. Add a tool in its own folder, meet the module contract, and the registry can include it without a central switch edit.
How the tool registry is organized
In the DevToolbox design described in its project article, each utility has a directory such as src/tools/<id>/ and an index.ts entry point. That module exports a ToolDefinition describing the tool and how to mount its interface. The article presents this as the project’s architecture; its current repository implementation has not been independently verified here.
As an Amazon Associate I earn from qualifying purchases.
The module contract
A definition includes an id, name, description, category, optional keywords, and a mount(container) function. The mount function builds the tool’s panel inside the supplied container and may return a cleanup function for removing event listeners or other resources when the panel is no longer in use.
Keeping the transformation logic in a sibling file such as logic.ts separates what a tool does from how its panel renders. That makes the pure functions easier to test without mounting a browser UI.
#1 Best Overall
What import.meta.glob does in this pattern
The registry pattern in the DevToolbox article is:
const modules = import.meta.glob('../tools/*/index.ts', { eager: true });
const tools = Object.entries(modules)
.filter(([path]) => !path.includes('/_template/'))
.map(([, mod]) => mod.default ?? mod.tool)
.filter(Boolean)
.sort((a, b) => a.name.localeCompare(b.name));Vite processes that glob at build time. It is not a browser-native scan of a directory at runtime. The pattern targets matching tool entry points; the subsequent pipeline excludes the template folder, selects a definition exported as either the default export or tool, drops missing values, and sorts the remaining definitions by name. The project article also says the implementation validates required fields such as id and mount before accepting a definition.
Vite’s official glob-import guide explains that glob patterns must be valid import specifiers and their arguments must be literals, not runtime variables or expressions. The feature is Vite-specific, not a browser or ECMAScript standard.
Rank #2
Choose eager or lazy imports
The example uses { eager: true }, but eager loading is a choice rather than a requirement. Vite’s default glob behavior returns a map of functions that dynamically import the matched modules. Those modules load lazily and are split into build chunks. Eager mode instead generates direct imports and maps paths to the imported modules.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
| Mode | What the glob map contains | Registry implication | Trade-off |
|---|---|---|---|
| Default, lazy | Functions that perform dynamic imports | Loading a module is asynchronous; registry code must handle promises. | Modules can be loaded on demand and split into chunks. |
{ eager: true } |
Imported module objects | The registry can be built synchronously from the map. | All matched modules are directly imported, keeping runtime registry code simpler for a small catalog. |
The DevToolbox article favors eager imports for the small utility catalog it describes, because it avoids maintaining an asynchronous import map. It suggests lazy imports as a possible fit if the catalog grows. Neither the article nor Vite’s guide supplies a quantitative catalog-size cutoff or a measured bundle-size or speed comparison, so treat this as an architectural trade-off—not a performance result.
Add a tool without editing a central switch
- Start from the project template. Copy
src/tools/_template/into a new directory atsrc/tools/<id>/, using an identifier appropriate for the utility. - Keep the work separable. Put transformation logic in a module such as
logic.ts, and write tests for its pure functions. The project article describes shared styles and DOM helpers as living insrc/core/. - Export the definition. Implement the required fields and a
mount(container)function in the newindex.ts. Ensure the definition is available as the default export or astool, matching the registry’s extraction logic. - Check the registry contract. Verify that the required
idandmountfields are present and that the entry point matches the glob’s../tools/*/index.tspattern. The template directory itself is filtered out. - Submit the change for review. The described contributor workflow ends with a pull request. The project article reports Vitest coverage for seed-tool logic and says CI expects tests for new tools; it gives no coverage percentage and does not establish that a particular test run passed.
With this convention, discovery comes from the Vite-processed file pattern, not from adding another branch to a shared switch. Vite’s literal-pattern constraint also means this specific glob cannot be assembled from a tool ID at runtime.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What the project says about browser processing and privacy
The DevToolbox article describes the app as a static Vite site deployed to GitHub Pages and says utility inputs are processed by page JavaScript without being sent to an application backend. It identifies encoding, formatting, parsing, and Web Crypto hashing where available as examples of work suited to browser-side processing. The article also describes theme preference as the seed app’s only intentional client-side persistence, stored in localStorage.
Rank #4
Those are the article’s claims about the project, not an independent audit of the live deployment or a guarantee that data cannot be exposed. Browser extensions, screenshots, and the network stack can still create exposure risks. “Processed in the browser” describes the stated application data flow; it does not establish protection against every way information might leave or be observed on a user’s device.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
